Categories
Vue Answers

How to watch props change with Vue Composition API and Vue 3?

Spread the love

Sometimes, we want to watch props change with Vue Composition API and Vue 3.

In this article, we’ll look at how to watch props change with Vue Composition API and Vue 3.

How to watch props change with Vue Composition API and Vue 3?

To watch props change with Vue Composition API and Vue 3, we can use the watch function.

For instance, we write

watch(() => props.selected, (selection, prevSelection) => { 
   /* ... */ 
})

to call watch to watch the selected prop.

We get the latest and previous value of it from the parameters in the 3rd argument.

Also, we can also put the prop in a ref and watch the ref with

const selected = ref(props.selected);

watch(selected, (selection, prevSelection) => {
  /* ... */
});

And we can watch multiple refs with

watch([ref1, ref2], ([refVal1, refVal2], [prevRef1, prevRef2]) => {
  /* ... */
});

Conclusion

To watch props change with Vue Composition API and Vue 3, we can use the watch function.

2 replies on “How to watch props change with Vue Composition API and Vue 3?”

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.