Vue JS Watching deep nested object

You could use the 'watch' method.. for example if your data is:

data: {    block: {        checkbox: {            active:false        },        someotherprop: {            changeme: 0        }    }}

You could do something like this:

data: {...},watch: {   'block.checkbox.active': function() {        // checkbox active state has changed        this.block.someotherprop.changeme = 5;    } }

If you want to watch the object as a whole with all its properties, and not only just one property, you can do this instead:

 data() {    return {       object: {          prop1: "a",          prop2: "b",       }        } }, watch: {    object: {        handler(newVal, oldVal) {            // do something with the object        },        deep: true,    },},

notice handler and deep: true

If you only want to watch prop1 you can do:

watch: {     'object.prop1' : function(newVal, oldVal) {         // do something here      }}

Other solution not mentioned here:Use the deep option.

watch:{  block: {    handler: function () {console.log("changed") },    deep: true  }}