Computed in Composition API in Vue - Step-by-Step Execution

Concept Flow - Computed in Composition API

Define reactive state with ref/reactive

↓

Create computed property using computed()

↓

Access computed property in template or code

↓

Computed auto-updates when dependencies change

↓

View reflects updated computed value

This flow shows how a reactive state is defined, a computed property is created based on it, and how the computed value updates automatically when the reactive state changes.

Execution Sample

Vue

import { ref, computed } from 'vue';
const count = ref(1);
const double = computed(() => count.value * 2);
console.log(double.value);
count.value = 3;
console.log(double.value);

This code creates a reactive count and a computed double that doubles count. It logs double before and after changing count.

Execution Table

Step	Action	count.value	double.value	Explanation
1	Initialize count with 1	1	undefined	count is reactive with initial value 1, double not yet accessed
2	Create computed double	1	undefined	double is defined but not accessed yet, no value cached
3	Access double.value first time	1	2	double computes 1 * 2 = 2 and caches it
4	Change count.value to 3	3	2	count changes, double cache invalidated but not recomputed yet
5	Access double.value again	3	6	double recomputes 3 * 2 = 6 and caches new value

💡 Execution ends after logging updated double.value showing reactive update

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5
count.value	1	1	3	3
double.value	undefined	2	2	6

Key Moments - 2 Insights

Why does double.value not update immediately when count.value changes?

Because computed properties cache their value until accessed again. After count.value changes (Step 4), double.value still holds old cached value until we access it again (Step 5), which triggers recomputation.

What happens the first time we access double.value?

The computed function runs and calculates the value based on current count.value, then caches it. This is shown in Step 3 where double.value becomes 2.

Visual Quiz - 3 Questions

Look at the execution table, what is double.value at Step 3?

A 1

B 2

C undefined

D 3

💡 Hint

Check the 'double.value' column at Step 3 in the execution_table

At which step does count.value change to 3?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'count.value' column changes in the execution_table

If we never access double.value after changing count.value, what happens to double.value?

A It updates automatically to new value

B It becomes undefined

C It stays cached at old value

D It throws an error

💡 Hint

Refer to Step 4 in execution_table where count.value changes but double.value remains the same until accessed

Concept Snapshot

Computed in Composition API:
- Use computed(() => ...) to create derived reactive values.
- Computed caches result until dependencies change.
- Access computed.value to get current value.
- Updates happen lazily on access after dependency changes.
- Helps keep UI in sync with reactive state efficiently.

Full Transcript

This visual execution shows how Vue's Composition API computed properties work. We start by defining a reactive variable 'count' with initial value 1. Then we create a computed property 'double' that doubles count's value. Initially, double.value is not computed. When we first access double.value, it calculates and caches the value 2. When count.value changes to 3, double.value cache is invalidated but not recomputed until accessed again. On next access, double.value updates to 6. This lazy update and caching behavior helps Vue optimize reactive updates. Key points include understanding when computed values recalculate and how caching works.