Computed in Composition API in Vue - Mini Project: Build & Apply

Using Computed Properties in Vue Composition API

📖 Scenario: You are building a simple Vue 3 app that shows a list of products with their prices. You want to calculate the total price dynamically whenever the prices change.

🎯 Goal: Create a Vue 3 component using the Composition API that holds a list of products and their prices, then use a computed property to calculate the total price. Display the total price in the template.

📋 What You'll Learn

Use the Vue 3 Composition API with setup() function

Create a reactive list of products with names and prices

Create a computed property to calculate the total price

Display the total price in the template inside a <strong> tag

💡 Why This Matters

🌍 Real World

Computed properties are used in Vue apps to automatically update displayed values when underlying data changes, such as totals, filtered lists, or derived states.

💼 Career

Understanding computed properties and the Composition API is essential for modern Vue development, a skill required for frontend developer roles working with Vue.js.

1

Set up the products list

Inside the setup() function, create a reactive variable called products using ref that holds an array of objects with these exact entries: { name: 'Apple', price: 1.2 }, { name: 'Banana', price: 0.8 }, and { name: 'Cherry', price: 2.5 }.

Vue

  
    
  



import { ref } from 'vue'

// Create a reactive variable called products with the given array
// Your code here

Hint

Use ref from Vue to create a reactive array inside setup().

2

Create a computed property for total price

Import computed from 'vue' and create a computed property called totalPrice that calculates the sum of all price values in the products array.

Vue

  
    
  



import { ref, computed } from 'vue'

const products = ref([
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.8 },
  { name: 'Cherry', price: 2.5 }
])

// Create a computed property called totalPrice that sums all product prices
// Your code here

Hint

Use computed to create totalPrice that sums prices using reduce.

3

Display the total price in the template

Inside the <div> in the template, add a <strong> tag that shows the text Total Price: followed by the value of totalPrice. Use Vue's mustache syntax {{ }} to bind the computed value.

Vue

  
     tag to display totalPrice here -->
    
  



import { ref, computed } from 'vue'

const products = ref([
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.8 },
  { name: 'Cherry', price: 2.5 }
])

const totalPrice = computed(() => {
  return products.value.reduce((sum, product) => sum + product.price, 0)
})

Hint

Use {{ totalPrice }} inside a <strong> tag to show the computed value.

4

Add product list display

Below the <strong> tag, add an unordered list <ul>. Use v-for with product and index to loop over products. Inside the loop, display each product's name and price in a list item <li>. Add a unique :key binding using index.

Vue

  
    Total Price: {{ totalPrice }}
     with v-for to list products here -->
    
  



import { ref, computed } from 'vue'

const products = ref([
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.8 },
  { name: 'Cherry', price: 2.5 }
])

const totalPrice = computed(() => {
  return products.value.reduce((sum, product) => sum + product.price, 0)
})

Hint

Use v-for="(product, index) in products" on <li> with :key="index" to list each product's name and price.

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