If you just need to watch one of the nested property.
export default { name: 'TestNestedWatch', data: function () { return { state: { isEdit: false, isSending: false }, } }, watch: { 'state.isEdit': function (newValue, oldValue) { console.log(newValue) } } }
If you want to avoid quoted property, you can use a computed
hack.
export default { name: 'TestNestedWatch', data: function () { return { state: { isEdit: false, isSending: false }, } }, computed: { stateIsEdit() { return this.state.isEdit } }, watch: { stateIsEdit: function (newValue, oldValue) { console.log(newValue) } } }
If you need to watch the entire object.
export default { name: 'TestNestedWatch', data: function () { return { state: { isEdit: false, isSending: false }, } }, watch: { state: { handler(val) { console.log(val) }, deep: true } } }