Ref and reactive in Composition API in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Vue component's template?

Consider this Vue 3 component using the Composition API. What will be displayed in the browser?

Vue

<script setup>
import { ref, reactive } from 'vue'
const count = ref(0)
const state = reactive({ clicks: 0 })
function increment() {
  count.value++
  state.clicks++
}
</script>
<template>
  <button @click="increment">Click me</button>
  <p>Count: {{ count }}</p>
  <p>Clicks: {{ state.clicks }}</p>
</template>

A Count and clicks do not update on click because reactive is not used correctly

B Count: 0\nClicks: 0 initially, then both increment by 1 on each click

C Count: 0\nClicks: 0 initially, but only count increments on click, clicks stays 0

D Count: 0\nClicks: 0 initially, but only clicks increments on click, count stays 0

💡 Hint

Remember that ref values update with .value and reactive objects update their properties directly.

The count is a ref, so its value is accessed and updated with .value. The state is reactive, so its properties update reactively. Both update correctly on each click.

📝 Syntax

intermediate

Which option correctly creates a reactive object with nested properties?

Which code snippet correctly creates a reactive object with nested properties that Vue tracks reactively?

A const state = reactive({ user: ref({ name: 'Alice', age: 30 }) })

B const state = ref({ user: { name: 'Alice', age: 30 } })

C const state = reactive({ user: { name: 'Alice', age: 30 } })

D const state = ref({ user: reactive({ name: 'Alice', age: 30 }) })

💡 Hint

Think about how reactive and ref handle nested objects.

Using reactive on an object with nested properties makes all nested properties reactive automatically. Wrapping nested objects in ref inside reactive or vice versa is unnecessary and can cause confusion.

🔧 Debug

advanced

Why does this reactive state not update the template?

Given this Vue component, why does the template not update when state.count changes?

Vue

<script setup>
import { reactive } from 'vue'
const state = reactive({ count: 0 })
function increment() {
  state.count = state.count + 1
}
</script>
<template>
  <button @click="increment">Add</button>
  <p>{{ state.count }}</p>
</template>

A The template does update; the code is correct and reactive works as expected.

B The reactive object was not declared properly; it should use ref instead.

C The increment function does not update state.count correctly; it should use state.count.value.

D The template must unwrap reactive properties manually using .value.

💡 Hint

Check how reactive objects and their properties are accessed and updated.

reactive creates a reactive proxy for the object. Its properties can be accessed and updated directly without .value. The template automatically tracks these changes and updates.

❓ state_output

advanced

What is the value of count after this code runs?

Given this code snippet, what is the final value of count.value?

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function update() {
  count.value += 1
  count.value = count.value * 2
}
update()
update()
</script>

A 8

B 2

C 4

D 6

💡 Hint

Calculate step by step what happens to count.value after each update() call.

Initially, count.value is 0.
First update(): count.value += 1 → 1, then count.value = 1 * 2 → 2.
Second update(): count.value += 1 → 3, then count.value = 3 * 2 → 6.
Final value is 6.

🧠 Conceptual

expert

Which statement about ref and reactive is true?

Choose the correct statement about ref and reactive in Vue's Composition API.

A <code>ref</code> creates a reactive reference to a primitive or object, while <code>reactive</code> creates a reactive proxy for an object only.

B <code>reactive</code> can be used with primitive values directly, while <code>ref</code> only works with objects.

C <code>ref</code> and <code>reactive</code> are interchangeable and produce identical reactivity behavior.

D <code>ref</code> automatically unwraps nested objects deeply, while <code>reactive</code> only unwraps shallowly.

💡 Hint

Think about what types each function is designed to handle.

ref creates a reactive container for any value, including primitives and objects. reactive creates a reactive proxy for objects only. They are not interchangeable and have different use cases.

Practice

1. In Vue's Composition API, what is the main difference between ref and reactive?

easy

A. ref is used to create components, reactive is used to create directives.

B. ref is only for arrays, reactive is only for strings.

C. ref is for simple values accessed with .value, reactive is for objects and arrays accessed directly.

D. ref and reactive are exactly the same and can be used interchangeably.

Solution

1. Step 1: Understand ref usage

   ref holds simple reactive values like numbers or strings and requires accessing the value with .value.

2. Step 2: Understand reactive usage

   reactive wraps objects or arrays to make their properties reactive and accessed directly without .value.

3. Final Answer:

   ref is for simple values accessed with .value, reactive is for objects and arrays accessed directly. -> Option C

4. Quick Check:

   ref vs reactive difference = D [OK]

Hint: Remember: ref = simple value with .value, reactive = object direct access [OK]

Common Mistakes:

• Thinking ref works directly on objects without .value
• Confusing reactive as only for primitive values
• Assuming ref and reactive are interchangeable

2. Which of the following is the correct way to declare a reactive object in Vue 3 Composition API?

easy

A. const state = ref({ count: 0 })

B. const state = reactive({ count: 0 })

C. const state = reactive(0)

D. const state = ref(0)

Solution

1. Step 1: Identify correct reactive syntax for objects

   reactive is used to wrap objects to make their properties reactive.

2. Step 2: Check each option

   const state = ref({ count: 0 }) uses ref with an object, which is allowed but requires .value to access. const state = reactive({ count: 0 }) correctly uses reactive with an object. const state = reactive(0) uses reactive with a number, which is invalid. const state = ref(0) uses ref with a number, which is valid but not for objects.

3. Final Answer:

   const state = reactive({ count: 0 }) -> Option B

4. Quick Check:

   reactive object syntax = C [OK]

Hint: Use reactive() for objects, ref() for primitives [OK]

Common Mistakes:

• Using reactive() on primitive values
• Using ref() for objects without .value access
• Confusing reactive and ref usage

3. Given the code:

import { ref, reactive } from 'vue';
const count = ref(0);
const state = reactive({ clicks: 0 });

count.value++;
state.clicks++;

console.log(count.value, state.clicks);

What will be logged to the console?

medium

A. 0 1

B. 0 0

C. 1 0

D. 1 1

Solution

1. Step 1: Understand ref and reactive increments

   count is a ref holding 0, incremented by count.value++ to 1. state is reactive object with clicks 0, incremented by state.clicks++ to 1.

2. Step 2: Check console.log output

   Logging count.value and state.clicks will print 1 1.

3. Final Answer:

   1 1 -> Option D

4. Quick Check:

   Increment ref and reactive values = A [OK]

Hint: Increment ref with .value, reactive directly [OK]

Common Mistakes:

• Forgetting to use .value with ref
• Assuming reactive needs .value
• Mixing up initial values

4. What is wrong with this Vue Composition API code?

import { ref } from 'vue';
const user = ref({ name: 'Alice' });
user.name = 'Bob';

medium

A. You must use user.value.name to update the name property.

B. ref cannot hold objects, use reactive instead.

C. You should use user.value() to access the object.

D. There is no error; the code works fine.

Solution

1. Step 1: Understand ref with objects

   ref wraps the object, so to access or update properties inside, you must use .value.

2. Step 2: Identify the error in property update

   The code tries to update user.name directly, which is incorrect. It should be user.value.name.

3. Final Answer:

   You must use user.value.name to update the name property. -> Option A

4. Quick Check:

   Access ref object properties with .value = A [OK]

Hint: Use .value to access or update ref object properties [OK]

Common Mistakes:

• Accessing ref object properties without .value
• Confusing ref and reactive usage
• Thinking ref cannot hold objects

5. You want to create a reactive state for a form with fields name (string) and tags (array). You also want to track a simple counter for submissions. Which setup correctly uses ref and reactive together?

hard

A. const form = reactive({ name: '', tags: [] }); const submitCount = ref(0);

B. const form = ref({ name: '', tags: [] }); const submitCount = reactive(0);

C. const form = reactive(''); const submitCount = ref([]);

D. const form = ref(''); const submitCount = reactive({ count: 0 });

Solution

1. Step 1: Identify correct usage for form object

   The form has multiple fields, so reactive is best to wrap the object with name and tags properties.

2. Step 2: Identify correct usage for simple counter

   The submission count is a simple number, so ref is appropriate to track it reactively.

3. Final Answer:

   const form = reactive({ name: '', tags: [] }); const submitCount = ref(0); -> Option A

4. Quick Check:

   Use reactive for objects, ref for simple values = B [OK]

Hint: Use reactive for objects/arrays, ref for simple values [OK]

Common Mistakes:

• Using ref for complex objects without .value
• Using reactive on primitive values
• Mixing up which data needs ref or reactive