How to Properly Watch for Nested Data in Vue.js

Let’s discuss how to properly watch for prop variation and see what method is right for your case.

You can use a deep watcher, however, it will detect any changes to the objects in the item array and additions to the array:

watch: {
  item: {
     handler(val){
       // do stuff
     },
     deep: true
  }
}

Here, you should set deep to true when watching an array or an object to tell Vue that it should watch the nested data for changes.

To not watch for every change on the top level object, simply watch a computed, instead:

const app = new Vue({
  el: '#app',
  computed: {
    foo() {
      return this.item.foo;
    }
  },
  watch: {
    foo() {
      console.log('Foo Changed!');
    }
  },
  data: {
    item: {
      foo: 'foo'
    }
  }
})

Watched props are sometimes confused with computed properties because they operate in the same way. To change the state you should use a computed prop. Using watch for updating state can be dangerous as both your component and the parent component are updating the same state (directly and indirectly).