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.