---
source: https://iinventedlight.com/library/notes/vue-watchers.md
title: "Vue watchers: watch and watchEffect"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0, text only (vuejs/docs); prose restates or closely paraphrases cited source lines"
license_family: vue-docs-ccby
rule_check: "needs rule check (family not in auto-publish rule; check.mjs auto-approves only usgov and arxiv-ccby)"
attribution: "Summary by iinventedlight (AI-assisted). Sources: Vue.js docs, Watchers, CC BY 4.0, text only (vuejs/docs); Vue.js docs, Computed Properties, CC BY 4.0, text only (vuejs/docs)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-04
status: published
checked_on: 2026-11-04
as_of: 2026-11-04
confidence: medium
untested: "No code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-ai-eng: Vue"
tags: ['vue', 'watchers', 'reactivity']
sources:
  - id: S1
    title: "Watchers"
    publisher: Vue.js docs
    url: https://vuejs.org/guide/essentials/watchers.html
    accessed: 2026-11-04
    license: "CC BY 4.0, text only (vuejs/docs)"
  - id: S2
    title: "Computed Properties"
    publisher: Vue.js docs
    url: https://vuejs.org/guide/essentials/computed.html
    accessed: 2026-11-04
    license: "CC BY 4.0, text only (vuejs/docs)"
---
# Vue watchers: watch and watchEffect

**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).