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.

Practice

1.

What is the main purpose of a computed property with both get and set in Vue?

easy

A. To create a reactive property that can both read and update data

B. To define a method that runs only once

C. To store static values that never change

D. To replace the data object entirely

Solution

1. Step 1: Understand computed properties

   Computed properties in Vue are reactive and can automatically update when dependencies change.

2. Step 2: Role of getter and setter

   Using both get and set allows reading the value and updating related data reactively.

3. Final Answer:

   To create a reactive property that can both read and update data -> Option A

4. Quick Check:

   Computed with get/set = reactive read and write [OK]

Hint: Remember: get reads, set writes reactive data [OK]

Common Mistakes:

• Thinking computed properties are static
• Confusing computed with methods
• Believing set is optional for writing data

2.

Which of the following is the correct syntax to define a computed property with a getter and setter in Vue 3 using <script setup>?

const fullName = computed({
  get() {
    return this.firstName + ' ' + this.lastName
  },
  set(value) {
    const names = value.split(' ')
    this.firstName = names[0]
    this.lastName = names[1]
  }
})

easy

A. Use arrow functions for get and set

B. Correct as is

C. Remove set, only get is allowed

D. Use function keyword without commas

Solution

1. Step 1: Check computed property syntax

   Vue 3 allows computed properties with an object containing get and set methods.

2. Step 2: Validate the example code

   The code correctly defines get and set as functions inside an object passed to computed().

3. Final Answer:

   Correct as is -> Option B

4. Quick Check:

   Object with get/set inside computed = correct syntax [OK]

Hint: Use object with get and set functions inside computed() [OK]

Common Mistakes:

• Using arrow functions that break 'this' context
• Omitting commas between get and set
• Trying to define computed as a single function

3.

Given this Vue 3 <script setup> code, what will be the console output after fullName.value = 'Jane Doe'?

import { ref, computed } from 'vue'

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

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(value) {
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})

fullName.value = 'Jane Doe'
console.log(firstName.value, lastName.value)

medium

A. 'Jane Doe' 'Doe'

B. Error: Cannot assign to computed property

C. 'Jane' 'Doe'

D. 'John' 'Smith'

Solution

1. Step 1: Understand the setter logic

   Setting fullName.value splits the string into ['Jane', 'Doe'] and assigns to firstName.value and lastName.value.

2. Step 2: Check console.log output

   After assignment, firstName.value is 'Jane' and lastName.value is 'Doe', so console logs 'Jane Doe'.

3. Final Answer:

   'Jane' 'Doe' -> Option C

4. Quick Check:

   Setter splits and assigns names = 'Jane' 'Doe' [OK]

Hint: Setter splits string and updates refs accordingly [OK]

Common Mistakes:

• Expecting full string in firstName
• Thinking computed properties are read-only
• Confusing ref.value and computed.value

4.

What is wrong with this computed property definition in Vue 3?

const fullName = computed({
  get: () => {
    return firstName.value + ' ' + lastName.value
  },
  set: (value) => {
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})

medium

A. Arrow functions break the reactivity context for get and set

B. Missing commas between get and set

C. Cannot use computed with set method

D. Must use async functions for get and set

Solution

1. Step 1: Analyze arrow function usage

   Arrow functions do not bind their own this, which can break reactivity when accessing reactive refs inside get/set.

2. Step 2: Understand Vue reactivity context

   Using normal function syntax ensures correct reactivity and access to reactive data.

3. Final Answer:

   Arrow functions break the reactivity context for get and set -> Option A

4. Quick Check:

   Use normal functions, not arrow, for computed get/set [OK]

Hint: Avoid arrow functions in computed get/set [OK]

Common Mistakes:

• Using arrow functions for get/set
• Thinking commas are missing
• Believing set is not allowed

5.

You want to create a computed property fullName that updates firstName and lastName refs, but also trims extra spaces and handles single names gracefully. Which computed property definition is best?

const fullName = computed({
  get() {
    return `${firstName.value.trim()} ${lastName.value.trim()}`.trim()
  },
  set(value) {
    const names = value.trim().split(/\s+/)
    firstName.value = names[0] || ''
    lastName.value = names.slice(1).join(' ') || ''
  }
})

hard

A. Setter should not use slice, only split

B. It will fail if value is empty string

C. Getter should not trim values

D. This handles trimming and single names correctly

Solution

1. Step 1: Check trimming in getter

   The getter trims both first and last names and then trims the combined string to avoid extra spaces.

2. Step 2: Analyze setter logic

   The setter trims input, splits by spaces, assigns first word to firstName, and joins the rest for lastName, handling single names gracefully.

3. Final Answer:

   This handles trimming and single names correctly -> Option D

4. Quick Check:

   Trim and split with fallback = robust computed set/get [OK]

Hint: Trim inputs and handle missing last name with slice [OK]

Common Mistakes:

• Not trimming input causing extra spaces
• Failing on single-word names
• Using split without regex for multiple spaces