Sometimes, we want to use $watch on an array of objects with Vue.js.

In this article, we’ll look at how to use $watch on an array of objects with Vue.js.

How to use $watch on an array of objects with Vue.js?

To use $watch on an array of objects with Vue.js, we can call add a watcher with the deep option set to true.

For instance, we write

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

to watch the things array reactive property for changes.

We set the deep option to true to watch all nested content in the array for changes.

And then we get the latest value for things in val and the previous value of it with oldVal.

Conclusion

To use $watch on an array of objects with Vue.js, we can call add a watcher with the deep option set to true.