watch Watchers (Options Style)
Last updated: 2026-10-22
watch Watchers (Options Style)
The watch option keys callbacks by the watched property name, supporting handler, deep, immediate and string method shorthand.
| Group | Options: State |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
data() { return { keyword: "" } },
watch: {
keyword(newVal, oldVal) { /* ... */ },
"user.name"(v) { /* quote nested paths */ }
}
}⚙️ Arguments
| value | An object keyed by data paths (quote dotted paths), valued by a function or { handler, deep, immediate } |
|---|
Returns：No return; callbacks receive (newValue, oldValue)
▶ Example
Edit the code below and see the live result:
Output：
Typing logs 'old → new', for example 'a → ab'.💡 Key Points
💡 Tip Lazy by default — add immediate: true to run at setup.
⚠️ Warning Quote nested paths or use deep: true, mindful of cost.
ℹ️ Note A string value reuses a method as the handler.
🏷️ Related State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Relation to the Composition API watch?
A Two spellings of one mechanism: keyed by name versus explicit source.
Q How to watch an array?
A Replacement triggers; in-place push needs deep: true or length watching.
Q Watch several at once?
A Use several keys, or watch([a, b]) in the Composition API.
