Reactive data with ref in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Vue component?

Consider this Vue 3 component using ref to track a counter. What will be displayed when the button is clicked twice?

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>
<template>
  <div>
    <p>Count is: {{ count }}</p>
    <button @click="increment">Add</button>
  </div>
</template>

A Count is: 2

B Count is: 0

C Count is: [object Object]

D Count is: undefined

💡 Hint

Remember that ref creates a reactive object and you access its value with .value inside script, but in template you can use it directly.

The count is a ref initialized to 0. Each click increments count.value. The template unwraps the ref automatically, so it shows the current number. After two clicks, the count is 2.

❓ state_output

intermediate

What is the value of message after running this code?

Given this Vue 3 setup script, what is the value of message.value after the code runs?

Vue

<script setup>
import { ref } from 'vue'
const message = ref('Hello')
message.value = message.value + ' World'
</script>

A 'Hello World'

B 'HelloWorld'

C 'Hello'

D undefined

💡 Hint

Check how string concatenation with a space works.

The initial value is 'Hello'. Adding ' World' with a space results in 'Hello World'.

📝 Syntax

advanced

Which option correctly declares a reactive reference to an object?

You want to create a reactive reference to an object with a name property set to 'Alice'. Which code is correct?

A const user = ref['name' => 'Alice']

B const user = ref({ name: 'Alice' })

C const user = ref(name: 'Alice')

D const user = ref('name' = 'Alice')

💡 Hint

Remember the syntax for creating an object in JavaScript.

Option B uses correct JavaScript object literal syntax inside ref(). Other options have invalid syntax.

🔧 Debug

advanced

Why does this Vue component not update the displayed count?

This Vue 3 component uses a ref for count but the displayed number never changes when clicking the button. What is the cause?

Vue

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

A The template syntax {{ count }} is invalid

B The increment function is missing parentheses

C count is not a ref, so Vue does not track changes to it

D The button click event is not bound correctly

💡 Hint

Check how reactivity works with refs in Vue.

The variable count is a plain number, not a ref. Vue cannot track changes to it, so the UI does not update.

🧠 Conceptual

expert

What happens when you destructure a ref object directly in Vue 3?

Given const count = ref(5), what is the value of num after const { value: num } = count and what is the reactivity behavior?

Vue

import { ref } from 'vue'
const count = ref(5)
const { value: num } = count
num = 10

A num is undefined and causes an error

B num is a reactive ref linked to count.value

C num updates count.value automatically when changed

D num is 10, but changing num does not update count.value

💡 Hint

Destructuring extracts the value but does not keep reactivity.

Destructuring extracts the value property as a plain variable. Changing num does not affect the original ref or trigger reactivity.