vue.js $watch array of objects

Question

mounted: function() {
  this.$watch('things', function(){console.log('a thing changed')}, true);
}

things is an array of objects [{foo:1}, {foo:2}]

$watch detects when an object is added or removed, but not when values on an object are changed. How can I do that?

question from:https://stackoverflow.com/questions/34283891/vue-js-watch-array-of-objects

Answer 1

You should pass an object instead of boolean as options, so:

mounted: function () {
  this.$watch('things', function () {
    console.log('a thing changed')
  }, {deep:true})
}

Or you could set the watcher into the vue instance like this:

new Vue({
  ...
  watch: {
    things: {
      handler: function (val, oldVal) {
        console.log('a thing changed')
      },
      deep: true
    }
  },
  ...
})

[demo]