You can watch each element in an array or dictionary for change independently with $watch('arr.0', () => {})
or $watch('dict.keyName', () => {})
from https://v2.vuejs.org/v2/api/#vm-watch:
Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.
However, you can iterate the dict/array and $watch each item independently. ie. $watch('foo.bar')
- this watches changes in the property 'bar' of the object 'foo'.
In this example, we watch all items in arr_of_numbers, also 'foo' properties of all items in arr_of_objects:
mounted() { this.arr_of_numbers.forEach( (index, val) => { this.$watch(['arr_of_numbers', index].join('.'), (newVal, oldVal) => { console.info("arr_of_numbers", newVal, oldVal); }); }); for (let index in this.arr_of_objects) { this.$watch(['arr_of_objects', index, 'foo'].join('.'), (newVal, oldVal) => { console.info("arr_of_objects", this.arr_of_objects[index], newVal, oldVal); }); } }, data() { return { arr_of_numbers: [0, 1, 2, 3], arr_of_objects: [{foo: 'foo'}, {foo:'bar'}] } }