Watch a nested property in Vue

Your watcher doesn't fire when something deep inside an object changes. Here is why and what to do.

SNP 034 #6B1 Filed js vue

Watching a reactive object with watch only reacts when the object itself is replaced. For changes inside it, go deep:

javascript
watch(form, (value) => save(value), { deep: true })

Deep watching walks the whole object on every change, so for big objects watch just the thing you care about instead:

javascript
watch(() => form.address.city, (city) => lookupZip(city))

The getter version is also what you need when the property might not exist yet, since Vue can't watch a path that is undefined.