Deep watch in not working on object Vue

Question

I have a watcher setup on an array and I have deep watch enabled on it, however the handler function does not trigger when the array changes, applications is defined in the object returned in data. Here's the code:

  watch: {
    applications: {
      handler: function(val, oldVal) {
        console.log('app changed');
      },
      deep: true,
    },
    page(newPage) {
      console.log('Newpage', newPage);
    },
  },

Answer 1

Vue cannot detect some changes to an array such as when you directly set an item within the index:

e.g. arr[indexOfItem] = newValue

Here are some alternative ways to detect changes in an array:

Vue.set(arr, indexOfItem, newValue)

or

arr.splice(indexOfItem, 1, newValue)

You can find better understanding of Array Change Detection here

Answer 2

If you reset your array with arr[ index ] = 'some value', Vue doesn't track to this variable. It would better to use Vue array’s mutation method. These methods used to track array change detection by Vue.

It is worked for me.