← All notes

Answer: Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes, such as mutating the DOM, or changing another piece of state based on the result of an async operation. That is what watchers are for. (S1, S2)

Defaults of watch

• watch is shallow by default: the callback will only trigger when the watched property has been assigned a new value, not on nested property changes. (S1)
• Deep watch requires traversing all nested properties in the watched object, and can be expensive when used on large data structures. (S1)
• watch is lazy by default: the callback won't be called until the watched source has changed. (S1)

watchEffect

• watchEffect() allows us to track the callback's reactive dependencies automatically. (S1)
• With watchEffect, the callback will run immediately, so there's no need to specify immediate: true. (S1)
• For watchers that have multiple dependencies, using watchEffect() removes the burden of having to maintain the list of dependencies manually. (S1)
• watchEffect only tracks dependencies during its synchronous execution. (S1)
• watch and watchEffect both allow us to reactively perform side effects; watchEffect combines dependency tracking and side effect into one phase. (S1)

Contrast with computed

• Computed getter functions should only perform pure computation and be free of side effects. (S2)

Claims

• id: C1 claim: watch is shallow by default. source: S1 evidence: "watch is shallow by default"
• id: C2 claim: watch is lazy by default. source: S1 evidence: "watch is lazy by default"
• id: C3 claim: watchEffect tracks reactive dependencies automatically. source: S1 evidence: "watchEffect() allows us to track the callback's reactive dependencies automatically."
• id: C4 claim: Computed properties compute derived values declaratively. source: S1 evidence: "Computed properties allow us to declaratively compute derived values."
• id: C5 claim: Computed properties are cached by reactive dependencies. source: S2 evidence: "the difference is that computed properties are cached based on their reactive dependencies."

Sources

• [S1] Watchers. Vue.js docs. https://vuejs.org/guide/essentials/watchers.html . License: CC BY 4.0, text only (vuejs/docs). Accessed 2026-11-04.
• [S2] Computed Properties. Vue.js docs. https://vuejs.org/guide/essentials/computed.html . License: CC BY 4.0, text only (vuejs/docs). Accessed 2026-11-04.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).

@misc{iil_note_n5ys5hv0,
  author = {{iinventedlight}},
  title = {{Vue watchers: watch and watchEffect}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-04},
  url = {https://iinventedlight.com/library/notes/vue-watchers/},
  note = {Permanent ID iil:note:n5ys5hv0. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/vue-watchers.md.