Sometimes, we want to watch for nested data with Vue.js.

In this article, we’ll look at how to watch for nested data with Vue.js.

How to watch for nested data with Vue.js?

To watch for nested data with Vue.js, we add a watcher with the deep option set to true.

For instance, we write

<script>
export default {
  watch: {
    item: {
      handler(val) {
        // ...
      },
      deep: true,
    },
  },
};
</script>

to add a watcher for the item reactive property.

We set the deep property to true to watch for changes in all nested properties of item.

Therefore, handler runs whenever the content of item changes.

Conclusion

To watch for nested data with Vue.js, we add a watcher with the deep option set to true.