By default, Vue’s watch property only watch for changes at the top level of the data object. If you want to watch for changes in nested properties, you need to use the deep option.<\/p>\n
Here’s how you can use deep watching in Vue.js:<\/p>\n
Code:<\/strong><\/p>\n In the above example, When we click on the Increase Quantity button, It executes the increaseQuantity function and it increases the quantity of the item. As we used the deep option inside the item watcher, it will trigger the handler function and it will console the updated result.<\/p>\n If you are using composition api, then you can consider below example for the reference:<\/p>\n By default, Vue’s watch property only watch for changes at the top level of the data object. If you want to watch for changes in nested properties, you need to use the deep option. Here’s how you can use deep watching in Vue.js: Code: <template> <p>Item name: {{ item.name }}, Item quantity: {{ item.quantity }}<\/p> […]<\/p>\n","protected":false},"author":1,"featured_media":8918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-8917","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8917"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=8917"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8917\/revisions"}],"predecessor-version":[{"id":8920,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/8917\/revisions\/8920"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/8918"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=8917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=8917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=8917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<template>\r\n <p>Item name: {{ item.name }}, Item quantity: {{ item.quantity }}<\/p>\r\n <button @click=\"increaseQuantity\">Increase quantity<\/button>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n item: {\r\n name: 'I Phone',\r\n quantity: 50\r\n }\r\n }\r\n },\r\n methods: {\r\n increaseQuantity() {\r\n this.item.quantity++;\r\n }\r\n },\r\n watch: {\r\n item: {\r\n handler(val){\r\n console.log(val);\r\n },\r\n deep: true\r\n }\r\n }\r\n}\r\n<\/script>\r\n<\/pre>\n<template>\r\n <p>Item name: {{ item.name }}, Item quantity: {{ item.quantity }}<\/p>\r\n <button @click=\"increaseQuantity\">Increase quantity<\/button>\r\n<\/template>\r\n\r\n<script setup>\r\nimport { ref, watch } from \"vue\";\r\n\r\nconst item = ref({\r\n name: \"I Phone\",\r\n quantity: 50\r\n})\r\n\r\nconst increaseQuantity = () => {\r\n item.value.quantity++;\r\n}\r\n\r\nwatch(\r\n () => item,\r\n (newVal) => {\r\n console.log(newVal.value);\r\n },\r\n { deep: true }\r\n)\r\n\r\n<\/script>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"