Vue Academy · Lesson

Computed Properties

Derive cached reactive values with computed properties.

Computed Properties is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Computed Property?

A computed property derives a value from other reactive data.

It recalculates only when its dependencies change
It reads like a normal property in templates
It keeps templates clean by moving logic into JS

Defining a computed

In the Composition API, use the computed function.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

Using a computed in the Template

A computed is accessed like a data property, with no parentheses.

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

<!-- fullName updates automatically when
     firstName or lastName change -->

Computed vs Methods

A method also returns a value, so why use computed?

Computed is cached based on dependencies
A method runs every time it is called in a render

Computed is more efficient for derived values that are used repeatedly.

Caching in Action

A computed re-runs only when a dependency changes. If you read it multiple times, the cached result is reused.

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

Methods Run Every Time

By contrast, a method recomputes on every call, even if inputs did not change.

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

computed in the Options API

The Options API declares computed properties in a computed block.

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

Computed Getters

By default a computed is read-only: it has only a getter.

The getter runs to produce the value whenever dependencies change.

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

Computed Setters

You can make a computed writable by supplying both a get and a set function.

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

Using the Setter

When you assign to a writable computed, its setter runs.

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

When to Use Computed

Reach for computed when you need a value derived from reactive state.

Filtering or sorting a list
Formatting data for display
Combining several values into one

Use watchers (next lesson) when you need to react with side effects instead.

Quick Check

Test your understanding of computed properties.

Recap: Computed Properties

You learned about derived state:

computed derives values from reactive data
It is cached and recomputes only when dependencies change
Methods run every call; computed does not
Computed can have a getter and optional setter

Next: watchers and deep reactivity.

Frequently asked questions

Is the “Computed Properties” lesson free?

Yes — the full text of “Computed Properties” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Computed Properties”?

Derive cached reactive values with computed properties. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Computed Properties” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy