Computed in Composition API in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this computed property?

Consider this Vue 3 Composition API code snippet. What will be the displayed value of fullName when firstName is 'Jane' and lastName is 'Doe'?

Vue

import { ref, computed } from 'vue';

const firstName = ref('Jane');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

// Assume fullName.value is displayed in template

A "firstName lastName"

B "Doe Jane"

C "Jane Doe"

D "JaneDoe"

💡 Hint

Remember computed properties return a value based on reactive refs.

The computed property concatenates firstName.value and lastName.value with a space, so it outputs 'Jane Doe'.

📝 Syntax

intermediate

Which option correctly defines a computed property that doubles a number?

You want to create a computed property doubleCount that returns twice the value of a reactive count. Which code snippet is correct?

Vue

import { ref, computed } from 'vue';
const count = ref(5);

A const doubleCount = computed(() => count.value * 2);

B const doubleCount = computed(count * 2);

C const doubleCount = computed(() => count.value ** 2);

D const doubleCount = computed(() => count * 2);

💡 Hint

Remember to access the value of a ref with .value inside computed.

Option A correctly uses a function returning count.value * 2. Options A and B misuse count without .value. Option A squares count.value instead of doubling.

❓ state_output

advanced

What is the value of fullName.value after updating lastName?

Given this code, what will fullName.value be after lastName.value = 'Smith'?

Vue

import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

lastName.value = 'Smith';

A "Smith John"

B "John Smith"

C "John Doe"

D "Doe Smith"

💡 Hint

Computed properties update automatically when dependencies change.

Changing lastName.value to 'Smith' updates fullName.value to 'John Smith' because fullName depends on lastName.value.

🔧 Debug

advanced

Why does this computed property not update when count changes?

Identify the reason why doubleCount does not update when count.value changes in this code:

Vue

import { ref, computed } from 'vue';
const count = ref(1);
const doubleCount = computed(() => count * 2);

count.value = 3;

A Because count is not accessed with .value inside computed, so reactivity is lost.

B Because computed properties cannot depend on refs.

C Because count.value was not initialized before computed.

D Because computed properties require async functions.

💡 Hint

Check how reactive refs are accessed inside computed functions.

The computed function uses count instead of count.value, so Vue does not track the dependency and doubleCount does not update.

🧠 Conceptual

expert

What happens if a computed property has a setter but you only use its getter?

In Vue 3 Composition API, you define a computed property with both a getter and a setter. If you only read the computed property without calling the setter, what is the effect?

Vue

import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed({
  get() { return count.value * 2; },
  set(value) { count.value = value / 2; }
});

// Only reading doubleCount.value

A The computed property becomes read-only and cannot be accessed.

B The setter runs automatically to keep count.value in sync.

C An error occurs because the setter is defined but not used.

D The getter runs and returns count.value * 2; the setter is not called and count.value stays the same.

💡 Hint

Think about when setters are triggered in computed properties.

The setter only runs when you assign a value to the computed property. Reading it calls only the getter, so count.value remains unchanged.