Computed properties for derived state in Vue

Introduction

Computed properties help you create values that automatically update when your data changes. They keep your code simple and efficient.

You want to show a value based on other data, like a full name from first and last names.

You need to filter or sort a list based on user input.

You want to calculate a total price from item quantities and prices.

You want to format a date or number dynamically.

You want to avoid repeating the same calculation in your template.

Syntax

Vue

import { computed, ref } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

Use computed to define a property that updates automatically.

Access reactive values inside computed using .value.

Examples

Combine two reactive values into one computed full name.

Vue

const firstName = ref('Jane');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

Filter a list reactively to get only even numbers.

Vue

const numbers = ref([1, 2, 3, 4]);
const evenNumbers = computed(() => numbers.value.filter(n => n % 2 === 0));

Calculate total price from price and quantity.

Vue

const price = ref(10);
const quantity = ref(3);
const total = computed(() => price.value * quantity.value);

Sample Program

This Vue component lets you type your first and last name. The full name updates automatically using a computed property.

Vue

<template>
  <div>
    <input v-model="firstName" aria-label="First name" />
    <input v-model="lastName" aria-label="Last name" />
    <p>Your full name is: {{ fullName }}</p>
  </div>
</template>

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

const firstName = ref('John');
const lastName = ref('Smith');

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

Important Notes

Computed properties cache their result until dependencies change, so they are efficient.

Do not use computed for side effects; use watch instead.

Always access reactive refs inside computed with .value.

Summary

Computed properties create values that update automatically when data changes.

They help keep templates clean and avoid repeated calculations.

Use computed with reactive refs and access values with .value.