How to Watch Props Change with Vue Composition API / Vue 3?

If you take a look at watch typing here it’s clear the first argument of watch can be array, function or Ref<T>

props passed to setup function is reactive object (made probably by readonly(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 (and same function exists in Vue 3), 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 (UPDATE 03/03/2021 – this was later changed and in release version of Vue 3, watch is lazy same way as it was in Vue 2)

So by accident you doing the same thing 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:

watch(() => props.selected, (first, second) => {
      console.log(
        "Watch props.selected function called with args:",
        first,
        second
      );
    });

Here the 1st function is executed immediately by Vue to collect dependencies (to know what should trigger the callback) and 2nd function is the callback itself.

Other way would be to convert props object using toRefs so it’s properties would be of type Ref<T> and you can pass them as a 1st argument of watch

Anyway, most of the time watching props is just not needed – simply use props.xxx directly in your template (or setup) and let the Vue do the rest