Vue3 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. But if you need to call a method or perform some other actions on prop changes this code will help you.

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.

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. Your callback is called only once and never again. Reason it is called at least once is because new watch API is behaving like current $watch with immediate option. So by accident you doing the same thing like Tony Tom suggested but with wrong value.

In both cases it's not valid code if you are using TypeScript.

You can do this instead:. Btw it's 2nd example of watch API docs.

Other way would be to convert props object using toRefs so its properties would be of type Ref and you can pass them as a 1st argument of watch.

I just wanted to add some more details to the answer above.

As Michal mentioned, the props coming is an object and is reactive as a whole. But, each key in the props object is not reactive on its own.

We need to adjust the watch signature for a value in the reactive object compared to a ref value.
Just some more info even though it's not the mentioned case in the question:If we want to watch on multiple properties, one can pass an array instead of a single reference.

This does not address the question of how to "watch" properties.

But if you want to know how to make props responsive with Vue's Composition API, then read on. In most cases you shouldn't have to write a bunch of code to "watch" things (unless you're creating side effects after changes).

The secret is this: Component props IS reactive. As soon as you access a particular prop, it is NOT reactive. This process of dividing out or accessing a part of an object is referred to as "destructuring".


I sure hope the Vue wizards can figure out how to make this easier..

  1. but as far as I know this is the type of code we'll have to write with the Composition API.
  2. Here is a link to the official documentation, where they caution you directly against destructuring props. Modified2 months ago. I am desperately trying to watch a prop in Vue3 (3.2.31, Composition API):. I trigger the emission of trigger-refresh, it is passed to the component with the code above and I see triggerRefresh changing in DevTools→Vue.
  3. So everything is fine up to the inside of the component except that the watch is not triggered (i.e. there is no message on the console).

I read the documentation for Watchers and responses to a question about watching props (one of the responses is almost identical to what I did) but I simply fail to understand why this does not work in my case. 4242 gold badges140140 silver badges271271 bronze badges. 271271 bronze badges. Try to add the immediate option in order to trigger the watch at the first prop change:.

271271 bronze badges. 63.8k1414 gold badges106106 silver badges132132 bronze badges.

106106 silver badges132132 bronze badges. Prop names are normalized to camel case.

  1. As it was stated in the question, it is triggerRefresh and not trigger-refresh that is seen updated.
  • So it should be:. 6060 gold badges356356 silver badges498498 bronze badges. 498498 bronze badges.
  • Throughout the course of developing a Vue app, you’ll have tons of reactive data properties. Your app will track input fields, data calculations, and a bunch of other properties and may need to perform an action when a value updates.
  • Watchers in Vue observe reactive properties and can detect when a property changes. It essentially acts as an event listener for our component’s reactive data.
  • Especially when combined with asynchronous API calls, there are hundreds of use cases like. Getting an object from database when an ID changes. Rerunning an animation when a prop changes. In Vue3, in addition to the watch method, there’s a new watchEffect method that can be used in the Composition API.
  1. This tutorial will go over both methods, cover how to use them, and some cool features of both.
  • Okay – let’s go! The Vue Options API provides a watch option in which you can define your watchers.
  • To use this, you must first have a property in your data object that you want to track.
  • That code will look like this. Then, we have to look at the structure of a watcher method. All you have to do is declare a function with the same name as the property you want to observe.
Michal LevýMichal Levý

Not the answer you're looking for? Browse other questions tagged vuejs3vue-composition-apivue-reactivity or ask your own question.