Computed Properties and Watchers

By Syncfusion®, Inc. · Last updated November 14, 2026

computed() and caching, computed vs functions, writable computed, watch() on refs, getters, reactive objects and many sources, deep, immediate and once, watchEffect() and flush timing, stopping a watcher, onWatcherCleanup() for stale requests, and when to use computed or a watcher.

Derived Values and Side Effects

• Some values come from other values. A bill total comes from price and plates.
• Derived value = a value worked out from state. Vue gives you computed() for it.
• Sometimes you must do something when state changes: save, log or load data.
• Side effect = an action outside the screen, such as saving or calling a server.
• Vue gives you watch() and watchEffect() for side effects.

Simple lesson: computed makes values. Watchers do jobs.

A Real-World Example

• Meera's bill shows the price, the plates, the GST and the total.
• GST and total must always match the plates.
• She does not want to update them by hand after every click.
• computed() keeps them right by itself.

• What happened: each click changed plates.
• subtotal, gst and total worked themselves out again.

What You Will Learn

1. How to make a value with computed().
2. Why computed values are cached, and how that differs from a function.
3. How to make a computed value you can also set.
4. How to run code when state changes with watch().
5. The deep, immediate and once options.
6. How watchEffect() finds what to watch by itself.
7. When a watcher runs: flush.
8. How to stop a watcher and cancel old work.
9. When to pick computed and when to pick a watcher.

computed()

• computed(() => ...) takes a function that returns a value.
• It gives back a read-only ref. Use .value in the script, the name in the template.
• Vue remembers which state the function read. These are its dependencies.
• When a dependency changes, the computed value is worked out again.

Computed vs a Function

• A function in the template runs again on every screen update.
• A computed value is cached. It runs again only when a dependency changes.
• Cached = the answer is saved and reused.
• Click "Refresh time" below. The function runs again. The computed value does not.

• What happened: "Refresh time" logged only "function ran".
• "Add a dish" changed a dependency, so both ran.

Writable Computed

• A computed value is read-only by default.
• You can give it a get and a set to make it writable.
• Setting it runs set, which changes the real state.

Simple lesson: computed() works a value out from state and saves the answer until the state changes.

watch()

• watch(source, callback) runs the callback when the source changes.
• The callback gets the new value and the old value.

• The source can be:

  • a ref
  • a getter (a function that returns a value)
  • a reactive object
  • an array of sources
• To watch one property of a reactive object, use a getter: () => order.plates.

• What happened: each button changed one source.
• Only the watchers for that source ran. Look at the Console below the preview.

deep, immediate and once

• deep = also notice changes inside nested objects and arrays.
• A watched reactive object is deep by default. A getter or ref to an object is not.
• deep: 1 (a number, Vue 3.5) watches only one level down.
• Careful: when you change inside an object, the new and old values are the same object. Compare a copied value instead, such as a getter that returns order.plates.
• immediate = run the callback once right away, not only after a change.
• once = run the callback one time only, then stop (Vue 3.4).

• What happened: "immediate" logged before any click.
• push changed the array inside the ref. deep: true noticed it.
• "once" logged on the first table change only.

Simple lesson: watch() runs your job when a chosen source changes.

watchEffect()

• watchEffect(fn) runs fn right away.
• Vue tracks every reactive value the function reads.
• When any of them changes, the function runs again.
• You do not list the sources. Vue finds them.
• Trap: in an async function, Vue only tracks what is read before the first await. Read the values you need at the top.

When a Watcher Runs: flush

• By default a watcher runs before Vue updates the screen. This is flush: 'pre'.
• flush: 'post' runs it after the screen update, so it can read the new page.
• flush: 'sync' runs it at once, on every single change. Use it rarely.
• watchPostEffect() and watchSyncEffect() are short names for these.

Simple lesson: watchEffect watches whatever it reads. flush: 'post' waits for the new screen.

Stopping and Cleaning Up

• A watcher stops by itself when its component is removed.
• But a watcher created later, inside a setTimeout or after an await, is not linked to the component. Stop it yourself.
• watch() and watchEffect() return a stop function. Call it to stop early.
• Stale request = an old request that finishes after a newer one and shows old data.
• onWatcherCleanup(fn) (Vue 3.5) runs fn before the watcher runs again, or when it stops.
• Use it to cancel the old request with AbortController.

• What happened: click "Dish 2" then "Dish 3" quickly.
• The request for dish 2 was cancelled. Only dish 3 was shown.
• After "Stop watching", clicks change id but load nothing.

Simple lesson: stop watchers you no longer need, and cancel old work in onWatcherCleanup.

Computed or Watcher?

Simple lesson: values are computed. Jobs are watched.

TL;DR

• computed(() => x) = a cached, read-only value worked out from state.
• Dependencies = the state a computed or watcher reads. A change reruns it.
• Writable computed = computed({ get, set }).
• watch(source, cb) = runs cb(new, old) when the source changes.
• Getter source = () => obj.prop, to watch one property.
• Options = deep, immediate, once, flush.
• watchEffect(fn) = runs now, then again when anything it read changes.
• Stop = the function returned by watch() / watchEffect().
• onWatcherCleanup(fn) = cancel old work before the next run (Vue 3.5).

Common mistakes

Check Yourself

Exercises

What to Remember

• computed is for values. It is cached until a dependency changes.
• Never change state or call servers inside a computed.
• watch is for jobs. Use a getter to watch one property.
• deep, immediate, once and flush change when and how a watcher runs.
• Cancel old requests with onWatcherCleanup to avoid stale data.

Next: Dynamic Rendering