Vue in Vue is best learned by connecting the rule to a small admin screen. Start with the smallest component or composable, observe the output, and then add one realistic constraint so the concept becomes practical.
The key habit for this lesson is to watch ref, prop, slot, or emitted event as it changes. That makes the topic easier to debug, easier to explain in interviews, and easier to use in real code without memorizing isolated syntax.
Computed properties are reactive, cached values derived from other reactive data. They automatically re-evaluate only when their dependencies change - unlike methods, which re-run on every render.
| Feature | Computed | Method | Watch |
|---|---|---|---|
| Cached | Yes - only recalculates when deps change | No - runs every render | N/A |
| Returns value | Yes | Yes | No (side effects) |
| Async support | No | Yes | Yes |
| Best for | Derived data, filtering, formatting | Event handlers, actions | Side effects, async ops |
<template>
<div>
<p>Full name: {{ fullName }}</p>
<p>Reversed: {{ reversedMessage }}</p>
<p>Active users: {{ activeCount }}</p>
<!-- Writable computed -->
<input v-model="fullNameWritable" placeholder="First Last" />
<p>First: {{ firstName }}, Last: {{ lastName }}</p>
<!-- Computed vs method - same result, different performance -->
<p>Computed (cached): {{ expensiveComputed }}</p>
<p>Method (not cached): {{ expensiveMethod() }}</p>
</div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
const firstName = ref('Alice')
const lastName = ref('Smith')
const message = ref('Hello Vue!')
const users = reactive([
{ id: 1, name: 'Alice', active: true },
{ id: 2, name: 'Bob', active: false },
{ id: 3, name: 'Carol', active: true },
])
// Read-only computed
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
const reversedMessage = computed(() => message.value.split('').reverse().join(''))
const activeCount = computed(() => users.filter(u => u.active).length)
// Writable computed - get + set
const fullNameWritable = computed({
get: () => `${firstName.value} ${lastName.value}`,
set: (val) => {
const parts = val.trim().split(' ')
firstName.value = parts[0] || ''
lastName.value = parts.slice(1).join(' ') || ''
}
})
// Expensive computation - computed caches the result
const expensiveComputed = computed(() => {
console.log('Computing...') // only runs when users changes
return users.reduce((sum, u) => sum + u.name.length, 0)
})
// Method - runs on every render
function expensiveMethod() {
console.log('Method called...') // runs every time template re-renders
return users.reduce((sum, u) => sum + u.name.length, 0)
}
</script><template>
<div class="cart">
<div v-for="item in cart" :key="item.id" class="cart-item">
<span>{{ item.name }}</span>
<input type="number" v-model.number="item.qty" min="1" />
<span>${{ (item.price * item.qty).toFixed(2) }}</span>
<button @click="removeItem(item.id)">Remove</button>
</div>
<div class="cart-summary">
<p>Items: {{ totalItems }}</p>
<p>Subtotal: ${{ subtotal }}</p>
<p v-if="hasDiscount">Discount (10%): -${{ discount }}</p>
<p><strong>Total: ${{ total }}</strong></p>
<p v-if="freeShipping" class="success">Free shipping!</p>
<p v-else>Add ${{ shippingThreshold - subtotal }} more for free shipping</p>
</div>
</div>
</template>
<script setup>
import { reactive, computed } from 'vue'
const cart = reactive([
{ id: 1, name: 'Vue T-Shirt', price: 25.00, qty: 2 },
{ id: 2, name: 'Vue Mug', price: 15.00, qty: 1 },
{ id: 3, name: 'Vue Sticker', price: 5.00, qty: 3 },
])
const shippingThreshold = 50
const totalItems = computed(() => cart.reduce((sum, i) => sum + i.qty, 0))
const subtotal = computed(() => cart.reduce((sum, i) => sum + i.price * i.qty, 0).toFixed(2))
const hasDiscount = computed(() => Number(subtotal.value) >= 100)
const discount = computed(() => (Number(subtotal.value) * 0.1).toFixed(2))
const total = computed(() => (Number(subtotal.value) - (hasDiscount.value ? Number(discount.value) : 0)).toFixed(2))
const freeShipping = computed(() => Number(subtotal.value) >= shippingThreshold)
function removeItem(id) {
const idx = cart.findIndex(i => i.id === id)
if (idx !== -1) cart.splice(idx, 1)
}
</script>Understanding Computed Properties is not just about syntax. In production applications, this topic directly affects maintainability, debugging speed, and team collaboration. Focus on readability, small reusable patterns, and predictable state flow when implementing Computed Properties.
A practical approach is to first implement the simplest working version, then refactor into reusable pieces (components/composables/stores) only when duplication appears. This helps keep your Vue codebase clean while avoiding over-engineering.
Use Vue when the program needs a clear answer to a specific problem, not because the keyword looks familiar. In a real Vue task, first name the input, then name the transformation, then name the output. This small discipline shows whether the topic is being used correctly or only copied from an example.
A reliable practice flow is: create the smallest working component or composable, add one normal case, add one edge case such as cached values after dependent refs change, and then confirm the result with Vue Devtools and template warnings. If the result surprises you, reduce the code until the behavior is visible again.
The most common trap here is putting side effects in a computed getter. Avoid it by writing one sentence before the code that explains why Vue is the right choice. After the code runs, verify the lesson by doing this: log when the getter recalculates.
Putting side effects in a computed getter.
Write the expected behavior first, then make the example prove it.
Practicing only the perfect input.
Also test cached values after dependent refs change before considering the lesson complete.
Looking only at the final output.
Trace ref, prop, slot, or emitted event through each important step.
Use it when the problem matches the behavior shown in the example and when the result can be verified through Vue Devtools and template warnings.
Start with a tiny case, then test cached values after dependent refs change. The main warning sign is putting side effects in a computed getter.
Trace ref, prop, slot, or emitted event, predict the result, run the example, and compare your prediction with the actual output.
Explore 500+ free tutorials across 20+ languages and frameworks.