Vue Computed Properties

Computed properties are reactive values derived from other reactive state. They are cached based on their dependencies and only re-evaluate when a dependency changes.

Basic Computed

import { ref, computed } from 'vue'

const firstName = ref('Alice')
const lastName  = ref('Smith')

const fullName = computed(() => `${firstName.value} ${lastName.value}`)
// fullName.value === 'Alice Smith'
// Updates automatically when firstName or lastName changes

Computed vs Methods

<!-- computed: cached — same result until deps change -->
<p>{{ fullName }}</p>

<!-- method: re-runs on every render -->
<p>{{ getFullName() }}</p>

Practical Example — Filtered List

const search = ref('')
const users  = ref([
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob',   active: false },
  { id: 3, name: 'Carol', active: true },
])

const filteredUsers = computed(() =>
  users.value.filter(u =>
    u.active && u.name.toLowerCase().includes(search.value.toLowerCase())
  )
)

Writable Computed

const firstName = ref('Alice')
const lastName  = ref('Smith')

const fullName = computed({
  get: ()  => `${firstName.value} ${lastName.value}`,
  set: (v) => {
    const [first, ...rest] = v.split(' ')
    firstName.value = first
    lastName.value  = rest.join(' ')
  }
})

fullName.value = 'Bob Jones'
// firstName.value === 'Bob', lastName.value === 'Jones'