Vue3 Setup Watch Props

Posted on  by admin
In this tutorial, you’ll learn how to watch props for changes in Vue.js.

When you pass data as a prop to a component it will be updated reactively.

Wenfang Du

If the yourProp changes, the yourPropChanged property will become true. Hi, I'm Renat 👋. If you find this post useful, please let me know in the comments below and subscribe to my newsletter. Cheers,Renat Galyamov. Want to share this with your friends?👉

PS: Make sure you check other Vue.js tutorials, e.g. how to password protect your website in Vue.js,where to put variables in Vue.js components, how to deploy Vue.js app to Firebase hosting.

Browse Javascript Answers by Framework

javascript byon Aug 25 2020 Comment .


What am I missing here? I am using Vue 3 + Vite.



This is not working. But if I don’t destructure it then it works.


Object (if the value is object), which is also reactive. Value (integer for example) which cannot be reactive by itself.

And destructuring is just value assigment:. You can use toRefs as described in docs. Now modelValue is ref so it can be passed as first argument of watch (no need to for a function) and in most places you must use modelValue.Value to get it's value.

33 gold badges4343 silver badges6767 bronze badges. 6767 bronze badges.

If you take a look at watch typing here (last bullet) its clear the first argument of watch can be array, function or Ref. props passed to setup function is reactive object (made probably by reactive()), it's properties are getters. So what you doing is passing the value of the getter as the 1st argument of watch - string "initial" in this case. Because Vue 2 $watch API is used under the hood, you are effectively trying to watch non-existent property with name "initial" on your component instance.