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.