Exploring watchers

Vue watchers programmatically observe component data and run whenever a particular property changes. Watched data can contain two arguments: oldVal and newVal. This can help you when writing expressions to compare data before writing or binding new values. Watchers can observe objects as well as other types, such as string, number, and array types.

In Chapter 1, Starting Your First Vue Project, we introduced life cycle hooks that run at specific times during a component’s lifespan. If the immediate key is set to true on a watcher, then when this component initializes, it will run this watcher on creation. You can watch all keys inside any given object by including the key and value deep: true (the default is false).

To clean up your watcher code, you can assign a handler argument to a defined component’s method, which is considered best practice for large projects.

Watchers complement the usage of computed data since they passively observe...