Vue Computed Properties

Vue Computed Properties: Cached Derived State in Vue 3

Vue computed properties calculate derived values from reactive state and cache the result automatically. A computed property only re-runs when one of its reactive dependencies changes, keeping templates fast and readable.

Without computed(), calling a helper function inside a template forces that function to execute on every re-render. Computed getters avoid repeated work when filtering lists, formatting totals, or combining fields.

flowchart LR
    StateA["Reactive Ref A"] --> Computed["computed() Getter"]
    StateB["Reactive Ref B"] --> Computed
    Computed -->|Cached Output| Template["Template Render"]

Computed Properties vs Regular Methods

Practical SFC Computed Properties Example

Computed values update automatically when any source ref changes, so your template stays declarative and clean. In <script setup>, import computed from 'vue' and pass a getter function. Notice how totalPrice builds directly on filteredProducts without duplicating filter logic.

<script setup>
import { ref, computed } from 'vue';

const search = ref('');
const products = ref([
  { id: 1, name: 'Vue Course', price: 49 },
  { id: 2, name: 'Vite Guide', price: 29 },
  { id: 3, name: 'Pinia Handbook', price: 19 }
]);

const filteredProducts = computed(() => {
  const term = search.value.trim().toLowerCase();
  return products.value.filter((item) =>
    item.name.toLowerCase().includes(term)
  );
});

const totalPrice = computed(() => {
  return filteredProducts.value.reduce((sum, item) => sum + item.price, 0);
});
</script>

<template>
  <div class="store-view">
    <input v-model="search" placeholder="Search products..." />

    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ul>

    <p>Filtered Total: <strong>${{ totalPrice }}</strong></p>
  </div>
</template>

Common Mistakes

• Running Side Effects Inside computed(): Never send API requests, set timers, or mutate other refs inside a computed getter. Computed functions must stay pure and return a value synchronously.
• Mutating a Computed Ref Directly: Computed properties are read-only by default. If you truly need two-way binding, pass an object with both get() and set(value) functions to computed().
• Mutating the Source Array with .sort(): Calling items.value.sort() inside computed() mutates the original array in place. Copy it first with [...items.value].sort(...).

Frequently Asked Questions

When does a Vue computed property re-evaluate?

It re-evaluates lazily only when two things happen: a reactive dependency read inside it changes, and something reads the computed property's value.

How do I write a writable computed property in Vue 3?

Pass an object { get: () => ..., set: (newValue) => ... } to computed(). Assigning to myComputed.value then invokes your custom setter.

Can I read .value inside a computed function?

Yes. Inside <script setup>, read search.value or products.value inside the computed() callback so Vue tracks those dependencies.