vue watch handler code example

Example 1: vue watch deep

export default {
  name: 'ColorChange',
  props: {
    colors: {
      type: Array,
      required: true,
    },
  },
  watch: {
    colors: {
      // This will let Vue know to look inside the array
      deep: true,

      // We have to move our method to a handler field
      handler(value) {
        console.log('The list of colors has changed!', value);
      }
    }
  }
}

Example 2: vuejs set

Vue.set(vm.someObject, 'propertyName', value)
// Or using alias
this.$set(this.someObject, 'propertyName', value)
// For an array, simply repalce propertyName with the index
this.$set(this.someArray, indexOfItem, value)
// Or assign new props to an object
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })