Computed with getter and setter in Vue - Step-by-Step Execution

Concept Flow - Computed with getter and setter

Define computed property

↓

Getter runs to read value

↓

Display or use computed value

↓

Setter runs when value changes

↓

Update underlying reactive data

↓

Getter runs again to reflect update

The computed property first reads data via getter, then updates data via setter when changed, keeping reactive state in sync.

Execution Sample

Vue

import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: val => {
    const parts = val.split(' ')
    firstName.value = parts[0] || ''
    lastName.value = parts.slice(1).join(' ') || ''
  }
})

This code creates a computed property fullName with a getter that joins firstName and lastName, and a setter that splits a full name string to update them.

Execution Table

Step	Action	Getter Output	Setter Input	Reactive Data Change	Resulting fullName
1	Initial getter call	John Doe		firstName=John, lastName=Doe	John Doe
2	Setter called with 'Jane Smith'		Jane Smith	firstName=Jane, lastName=Smith	Jane Smith
3	Getter called after setter	Jane Smith		firstName=Jane, lastName=Smith	Jane Smith
4	Setter called with 'Alice'		Alice	firstName=Alice, lastName=''	Alice
5	Getter called after setter	Alice		firstName=Alice, lastName=''	Alice
6	Setter called with '' (empty string)			firstName='', lastName=''
7	Getter called after setter			firstName='', lastName=''

💡 Execution stops after updating reactive data and reflecting changes in getter output.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	Final
firstName.value	John	Jane	Alice
lastName.value	Doe	Smith
fullName.value (getter)	John Doe	Jane Smith	Alice

Key Moments - 2 Insights

Why does the getter run again after the setter updates the data?

Because the setter changes reactive data (firstName and lastName), Vue triggers the getter to recalculate fullName, as shown in steps 3, 5, and 7 in the execution_table.

What happens if the setter receives a single word without a space?

The setter splits the string by space; if only one word exists, lastName becomes empty. This is shown in step 4 where 'Alice' sets firstName to 'Alice' and lastName to ''.

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What are the values of firstName and lastName after the setter runs?

A firstName=Jane, lastName=Smith

B firstName=John, lastName=Doe

C firstName=Alice, lastName=Smith

D firstName=Jane, lastName=''

💡 Hint

Check the 'Reactive Data Change' column in step 2 of the execution_table.

At which step does the fullName getter output become 'Alice ' (with a trailing space)?

A Step 3

B Step 5

C Step 4

D Step 6

💡 Hint

Look at the 'Getter Output' column in the execution_table for the value 'Alice '.

If the setter is called with an empty string, what will fullName.value be after the getter runs?

A Undefined

B Empty string ''

C A single space ' '

D null

💡 Hint

Refer to steps 6 and 7 in the execution_table and the variable_tracker for fullName.value.

Concept Snapshot

Computed properties in Vue can have both getter and setter.
Getter reads reactive data and returns a value.
Setter updates reactive data when the computed value changes.
Setter input is split or processed to update underlying refs.
Getter runs again after setter updates to reflect changes.
This keeps UI and data in sync reactively.

Full Transcript

This visual execution traces a Vue computed property with a getter and setter. Initially, the getter combines firstName and lastName to form fullName. When fullName is set with a new string, the setter splits it and updates firstName and lastName. After the setter updates these reactive refs, the getter runs again to produce the updated fullName. The execution table shows each step, including initial read, setter calls with different inputs, and resulting reactive data changes. The variable tracker follows firstName, lastName, and fullName values through these steps. Key moments clarify why the getter runs after setter and how single-word inputs affect lastName. The quiz tests understanding of data changes and getter outputs at specific steps. This helps beginners see how Vue keeps computed properties reactive and synchronized.