computed()

Definition

computed() declares a value *derived* from other reactive state. You pass it a getter function that reads some reactive values and returns a result; computed() gives you back a reactive ref whose value is that result, kept up to date automatically. It is the tool for anything you would otherwise recalculate by hand — a total, a formatted string, a filtered or sorted list.

It builds directly on ref() and the wider reactivity model: a computed is itself a ref, so you read it through .value in script and by bare name in a template. What sets it apart from an ordinary function call is *caching* — the getter does not run on every access, only when something it depends on has changed.

Syntax

import { computed } from 'vue';

// read-only: a single getter function
const total = computed(() => price.value * qty.value);
total.value;   // read the derived value

// writable: an object with get and set
const full = computed({
  get: () => first.value + ' ' + last.value,
  set: (v) => { [first.value, last.value] = v.split(' '); }
});

Parameters

In its common form computed() takes a single argument — the getter. Passing an options object with get and set instead produces a writable computed, useful when a derived value also needs to be assignable.

Return value

computed() returns a read-only computed ref. Like any ref you read it through .value in script and by bare name in a template, but you cannot assign to it (in the getter-only form) — it is a projection of other state, not a store of its own. Its defining behaviour is caching: the returned ref remembers its last result and hands it back on every read until one of the reactive values the getter used actually changes, at which point the getter re-runs and the cached result is refreshed.

• The getter is *lazy and cached*: it runs on first access and then only re-runs when a dependency changes, so reading a computed many times costs nothing extra.
• The result is read-only in the getter-only form; assigning to its .value warns. Use the { get, set } form when you need it to be writable.
• Prefer a computed over a method call in the template for derived values — a method re-runs on every render, a computed re-runs only when its inputs change.

Examples

A derived total that recomputes on change

The getter multiplies two reactive properties. Add an item and the total refreshes on its own — Vue re-runs the getter only because cart.items changed.

A filtered list driven by an input

A computed can return a whole array. Here it filters a source list by the typed query and re-runs only when the query changes, so the list stays in sync as you type.

A writable computed with get and set

const fullName = computed({
  get: () => first.value + ' ' + last.value,
  set: (v) => { const [f, l] = v.split(' '); first.value = f; last.value = l; }
});

fullName.value = 'Grace Hopper';   // runs set, updates first and last

Browser & runtime support

computed() ships in every Vue 3 build as part of the Composition API, imported by name from vue. It works in <script setup>, in setup(), and in composables. Its caching is automatic and needs no configuration; the dependency tracking is the same mechanism that powers ref() and reactive().