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.

Practice

1. What is the main purpose of computed properties in Vue's Composition API?

easy

A. To store static data that never changes

B. To define methods that run only once

C. To replace the data option in Options API

D. To create reactive values that update automatically when dependencies change

Solution

1. Step 1: Understand computed properties role

   Computed properties are reactive and update automatically when their dependencies change.

2. Step 2: Compare with other options

   Methods run on demand, static data doesn't update, and computed doesn't replace data but complements it.

3. Final Answer:

   To create reactive values that update automatically when dependencies change -> Option D

4. Quick Check:

   Computed = reactive auto-update [OK]

Hint: Computed = reactive values that auto-update [OK]

Common Mistakes:

• Confusing computed with methods
• Thinking computed stores static data
• Believing computed replaces data option

2. Which of the following is the correct syntax to create a computed property named fullName inside setup()?

easy

A. const fullName = computed(() => firstName + ' ' + lastName);

B. const fullName = computed { return firstName + ' ' + lastName };

C. const fullName = computed(function() { firstName + ' ' + lastName });

D. const fullName = computed(() => { firstName + ' ' + lastName });

Solution

1. Step 1: Recall computed syntax

   Computed takes a function returning a value, usually an arrow function with parentheses and curly braces if needed.

2. Step 2: Check each option

   const fullName = computed(() => fullName + ' ' + lastName); uses arrow function with parentheses and returns expression correctly. const fullName = computed { return firstName + ' ' + lastName }; misses parentheses and arrow. const fullName = computed(function() { firstName + ' ' + lastName }); lacks return statement. const fullName = computed(() => { firstName + ' ' + lastName }); has curly braces but no return, so returns undefined.

3. Final Answer:

   const fullName = computed(() => firstName + ' ' + lastName); -> Option A

4. Quick Check:

   Correct arrow function syntax = const fullName = computed(() => firstName + ' ' + lastName); [OK]

Hint: Use arrow function with parentheses and return expression [OK]

Common Mistakes:

• Omitting parentheses in arrow function
• Forgetting return statement with curly braces
• Using wrong function syntax inside computed

3. Given the code inside setup():

const count = ref(2);
const double = computed(() => count.value * 2);
count.value = 5;
console.log(double.value);

What will be logged to the console?

medium

A. 2

B. 5

C. 10

D. 4

Solution

1. Step 1: Understand reactive refs and computed

   Initially, count.value is 2, so double.value is 4. Then count.value is updated to 5.

2. Step 2: Compute updated value

   Computed property recalculates automatically: 5 * 2 = 10.

3. Final Answer:

   10 -> Option C

4. Quick Check:

   Updated count * 2 = 10 [OK]

Hint: Computed updates automatically when dependencies change [OK]

Common Mistakes:

• Thinking computed doesn't update after ref changes
• Confusing count value with computed value
• Ignoring .value when accessing refs

4. Identify the error in this computed property code inside setup():

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => {
  firstName + ' ' + lastName
});

medium

A. Missing return statement inside computed function

B. Refs should not be used inside computed

C. Computed must be declared outside setup()

D. firstName and lastName should not be refs

Solution

1. Step 1: Analyze computed function body

   The function uses curly braces but does not return any value explicitly.

2. Step 2: Understand arrow function behavior

   With curly braces, arrow functions need an explicit return; otherwise, they return undefined.

3. Final Answer:

   Missing return statement inside computed function -> Option A

4. Quick Check:

   Curly braces need return [OK]

Hint: Use return with curly braces in arrow functions [OK]

Common Mistakes:

• Omitting return in arrow function with braces
• Thinking refs can't be used in computed
• Believing computed must be outside setup

5. You want to create a computed property statusMessage that returns "Active" if isActive is true, "Inactive" if false, and "Unknown" if isActive is null or undefined. Which code correctly implements this inside setup()?

hard

A. const statusMessage = computed(() => isActive.value ? 'Active' : 'Inactive');

B. const statusMessage = computed(() => isActive.value === true ? 'Active' : isActive.value === false ? 'Inactive' : 'Unknown');

C. const statusMessage = computed(() => { if (isActive.value) return 'Active'; else return 'Inactive'; });

D. const statusMessage = computed(() => isActive ? 'Active' : 'Inactive');

Solution

1. Step 1: Understand the conditions

   We need to check three cases: true, false, and null/undefined (unknown).

2. Step 2: Evaluate each option

   const statusMessage = computed(() => isActive.value ? 'Active' : 'Inactive'); only handles true/false, ignoring null/undefined. const statusMessage = computed(() => isActive.value === true ? 'Active' : isActive.value === false ? 'Inactive' : 'Unknown'); uses nested ternary to cover all three cases correctly. const statusMessage = computed(() => { if (isActive.value) return 'Active'; else return 'Inactive'; }); misses the unknown case and uses if-else without else if. const statusMessage = computed(() => isActive ? 'Active' : 'Inactive'); checks isActive directly without .value and misses unknown case.

3. Final Answer:

   const statusMessage = computed(() => isActive.value === true ? 'Active' : isActive.value === false ? 'Inactive' : 'Unknown'); -> Option B

4. Quick Check:

   All cases handled with nested ternary [OK]

Hint: Use nested ternary to cover all true, false, unknown cases [OK]

Common Mistakes:

• Ignoring null or undefined cases
• Not using .value to access ref
• Using simple if-else missing else if