Computed with getter and setter in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when updating a computed property with a setter?

Consider this Vue 3 component using a computed property with a getter and setter. What will be the displayed value after clicking the button once?

Vue

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(value) {
    const parts = value.split(' ')
    firstName.value = parts[0] || ''
    lastName.value = parts[1] || ''
  }
})
function updateName() {
  fullName.value = 'Jane Smith'
}
</script>
<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <button @click="updateName">Change Name</button>
  </div>
</template>

A Full Name: John Doe

B Full Name: John Smith

C Full Name: Jane Doe

D Full Name: Jane Smith

💡 Hint

Think about how the setter splits the string and updates the reactive refs.

The setter splits the string 'Jane Smith' into ['Jane', 'Smith'] and updates firstName and lastName. The getter then returns 'Jane Smith'.

📝 Syntax

intermediate

Which computed property syntax correctly defines a getter and setter in Vue 3?

Choose the correct way to define a computed property with both getter and setter functions.

A computed({ get() { return count.value }, set(value) { count.value = value } })

B computed(() => count.value, (value) => { count.value = value })

C computed({ getter() { return count.value }, setter(value) { count.value = value } })

D computed({ get: () => count.value, set: (value) => { count.value = value } })

💡 Hint

Remember the computed function accepts an object with get and set keys for getter and setter.

Option A uses the correct keys get and set with function definitions. Option A is invalid because computed does not accept two functions as arguments. Option A uses wrong keys getter and setter. Option A uses arrow functions but the object keys are correct; however, arrow functions for get and set are allowed but less common; still, this syntax is valid in Vue 3, but the question expects the standard method syntax.

❓ state_output

advanced

What is the value of fullName after setting it to an empty string?

Given this Vue 3 component, what will fullName.value be after calling fullName.value = ''?

Vue

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('Alice')
const lastName = ref('Wonderland')
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`.trim()
  },
  set(value) {
    const parts = value.split(' ')
    firstName.value = parts[0] || ''
    lastName.value = parts[1] || ''
  }
})
fullName.value = ''
</script>

A "" (empty string)

B " " (a single space)

C "Alice Wonderland"

D " " (space trimmed to empty string)

💡 Hint

Check how the setter updates firstName and lastName when given an empty string.

The setter splits the empty string into an array with one empty string element. So firstName.value becomes '', and lastName.value becomes ''. The getter returns the concatenation trimmed, which is an empty string.

🔧 Debug

advanced

Why does this computed setter not update the reactive state?

Look at this Vue 3 code snippet. The setter is called but the displayed name does not update. What is the problem?

Vue

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('Tom')
const lastName = ref('Jerry')
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(value) {
    const parts = value.split(' ')
    firstName.value = parts[0] || ''
    lastName.value = parts[1] || ''
  }
})
function changeName() {
  fullName.value = 'Spike Bulldog'
}
</script>
<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="changeName">Change</button>
  </div>
</template>

A The computed property is missing a return statement in the getter.

B The setter reassigns the refs instead of updating their .value properties.

C The setter does not split the string correctly.

D The changeName function is not called on button click.

💡 Hint

Remember how to update reactive refs in Vue 3.

In the setter, firstName and lastName are reassigned to strings, breaking reactivity. Instead, their .value properties must be updated.

🧠 Conceptual

expert

How does Vue 3 track dependencies in computed properties with getters and setters?

Which statement best explains how Vue 3 tracks reactive dependencies when using computed properties with both getter and setter?

A Vue tracks dependencies only when the setter updates reactive refs explicitly.

B Vue tracks dependencies during both getter and setter executions equally.

C Vue tracks dependencies only during the getter execution and ignores the setter for reactivity.

D Vue does not track dependencies in computed properties with setters.

💡 Hint

Think about when Vue collects reactive dependencies for reactivity updates.

Vue collects reactive dependencies when the getter runs, so it knows when to update computed values. The setter is just a way to update reactive state but does not itself track dependencies.

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