Computed Properties in Vue.js
From the Vue.js cheat sheet · Computed Properties & Watchers · verified Jul 2026
Computed Properties
Cached reactive computations
vue
<!-- Vue 3 Composition API -->
<script setup>
import { ref, computed } from 'vue'
const price = ref(100)
const quantity = ref(2)
const total = computed(() => price.value * quantity.value)
const formattedTotal = computed(() => `$${total.value}`)
</script>
<!-- Vue 2/3 Options API -->
<script>
export default {
data() {
return { price: 100, quantity: 2 }
},
computed: {
total() {
return this.price * this.quantity
}
}
}
</script>💡 Computed properties are cached based on reactive dependencies
⚡ Use computed for expensive operations that depend on reactive data
📌 Computed properties are read-only by default, use get/set for writable
🔥 In Vue 3, computed returns a ref, access with .value in script