How to watch the change in arrays and objects in VueJs

In this tutorial, we will learn how to watch the nested data like arrays and objects in Vue.js

Watching Props Arrays:

export default {
  name: "ComponentName",
  props: {
    users: {
      type: Array,
      required: true,
    },
  },
  watch: {
    users: {
      deep: true,
      handler(newValue, oldValue) {
        console.log("Manipulate new and old value here")
      }
    }
  },
}

Here we are using the users array and watching it inside the watch block. deep: true will let Vue to watch inside the array and the handler will give the old and new values.

Watching Objects:

export default {
  name: "ComponentName",
  data() {
    return {
      entity: {
        properties: [],
        propertyOne:'',
        propertyTwo:''
      }
    }
  },
  watch: {
    entity: {
      deep: true,
      handler(newValue, oldValue) {
        console.log("Manipulate new and old value here")
      }
    }
  },
}

Here, we are creating the entity object and watching it in the watch block. Here it will deep watch the whole entity object.

Watching properties of Objects:

If we don't want to watch for every change on the object, we can watch every single entity as well

export default {
  name: "ComponentName",
  data() {
    return {
      entity: {
        properties: [],
        propertyOne:'',
        propertyTwo:''
      }
    }
  },
  watch: {
    'entity.properties': {
      handler(newValue, oldValue) {
        console.log("Manipulate new and old value here")
      },
      deep: true
    },
    'entity.propertyOne': {
      handler(newValue, oldValue) {
        console.log("Manipulate new and old value here")
      },
    },
  },
}

Watching properties of Objects using computed:

export default {
  name: "ComponentName",
  data() {
    return {
      entity: {
        properties: [],
        propertyOne:'',
        propertyTwo:''
      }
    }
  },
  computed: {
    entityPropertyOne() {
      return this.entity.propertyOne;
    }
  },
  watch: {
    entityPropertyOne: {
      handler(newValue, oldValue) {
        console.log("Manipulate new and old value here")
      },
    },
  },
}

Read More