midVue.js
How do you use 'watch' with an array or object dependency?
Updated May 4, 2026
Short answer
Use the { deep: true } option to watch for nested changes, or watch a getter for specific properties.
Deep explanation
By default, watch on an object only triggers if the object reference changes. If you modify a property inside the object, it won't fire unless deep is set to true. Alternatively, for better performance, you can watch a specific property using a getter function: () => obj.prop.
Real-world example
Watching a 'Settings' object for any change to automatically save it to a database.
Common mistakes
- Using `deep: true` on a massive object, which can cause significant performance lag as Vue must traverse the whole tree.
Follow-up questions
- What does the 'flush' option do in a watch?