LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1215 min read

Computed Properties

Derive values from reactive state efficiently using computed(), with automatic caching based on dependencies.

What Is a Computed Property?

A computed property derives a new value from one or more reactive sources. Vue automatically tracks which reactive values it reads, and only re-evaluates it when one of those actually changes — the result is cached in between.

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


const firstName = ref('Ada');
const lastName = ref('Lovelace');


const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>


<template>
  <p>{{ fullName }}</p>
</template>

Computed vs Methods

A method call in a template — like {{ getFullName() }} — re-runs on every single re-render, regardless of whether its inputs changed. A computed property only re-runs when its actual reactive dependencies change, making it more efficient for expensive or frequently-displayed derived values.

Computed PropertyMethod
CachingCached until a dependency changesRe-runs on every render
Syntax in template{{ fullName }} — no parentheses{{ getFullName() }} — called directly
Best forDerived, read-focused valuesActions and event handler logic
Rule of Thumb

If a template needs to display a derived value, reach for computed() first — reserve plain methods for things that actually do something, like an event handler or a one-off calculation.

Writable Computed Properties

By default a computed property is read-only, but you can make one writable by providing both a get and a set function — useful for a value that's derived for display but also needs to be settable, like a full name split into first/last.

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`;
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ');
  },
});


fullName.value = 'Grace Hopper'; // sets firstName and lastName

Common Beginner Mistakes

Putting side effects inside a computed getter

A computed property should be a pure derivation with no side effects (no API calls, no mutating other state) — use a watcher for reacting to changes with side effects.

Calling a computed property like a function in the template

Write {{ fullName }}, not {{ fullName() }} — a computed ref's value is accessed like a property, not invoked.

FAQs

Yes — computed properties can read other computed properties, and Vue tracks the whole dependency chain correctly.

No — templates automatically unwrap refs (including computed ones); .value is only needed inside <script>.

Summary

computed() gives you efficient, cached derived state, tracked automatically from whatever reactive values it reads. Next, you'll learn watchers, for running side effects in response to state changes.

Next Lesson →

Watchers