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.

Practice

1. What does the ref function in Vue do?

easy

A. Defines a new component

B. Creates a reactive data reference that Vue tracks for changes

C. Imports external libraries

D. Sets up routing between pages

Solution

1. Step 1: Understand the purpose of ref

   ref is used to create reactive data that Vue can track and update the UI when it changes.

2. Step 2: Compare options with ref usage

   Options A, C, and D describe unrelated Vue features like components, imports, and routing, not reactive data.

3. Final Answer:

   Creates a reactive data reference that Vue tracks for changes -> Option B

4. Quick Check:

   ref creates reactive data = B [OK]

Hint: Remember: ref makes data reactive for UI updates [OK]

Common Mistakes:

• Confusing ref with component creation
• Thinking ref imports libraries
• Mixing ref with routing setup

2. Which is the correct way to declare a reactive variable count initialized to 0 using ref in Vue?

easy

A. var count = ref;

B. const count = reactive(0);

C. const count = ref(0);

D. let count = ref = 0;

Solution

1. Step 1: Recall correct ref syntax

   The correct syntax is const count = ref(0); to create a reactive reference with initial value 0.

2. Step 2: Identify incorrect options

   const count = reactive(0); uses reactive incorrectly with a primitive. let count = ref = 0; has invalid assignment syntax. var count = ref; incorrectly assigns the ref function without calling it and uses var which is discouraged in modern Vue code.

3. Final Answer:

   const count = ref(0); -> Option C

4. Quick Check:

   Use const with ref() for reactive variables = D [OK]

Hint: Use const and call ref() with initial value [OK]

Common Mistakes:

• Using reactive() for primitives
• Incorrect assignment syntax
• Using var instead of const

3. Given the code:

import { ref } from 'vue';
const count = ref(5);
count.value++;
console.log(count.value);

What will be logged to the console?

medium

A. 6

B. 5

C. undefined

D. Error: count is not a function

Solution

1. Step 1: Understand ref and .value usage

   count is a reactive reference initialized to 5. Incrementing count.value++ increases it to 6.

2. Step 2: Determine console output

   Logging count.value after increment prints 6.

3. Final Answer:

   6 -> Option A

4. Quick Check:

   Increment ref.value updates value = 6 [OK]

Hint: Remember to use .value to access and update ref data [OK]

Common Mistakes:

• Logging count instead of count.value
• Forgetting to use .value to update
• Expecting original value without increment

4. What is wrong with this Vue code snippet?

import { ref } from 'vue';
const message = ref('Hello');
message = 'Hi';

medium

A. You cannot reassign a ref variable directly; must update .value

B. ref cannot hold string values

C. Missing parentheses when calling ref

D. No import statement for ref

Solution

1. Step 1: Identify how to update ref values

   Ref variables are constants holding reactive objects. You cannot reassign the variable itself; instead, update the inner value with message.value = 'Hi';.

2. Step 2: Check other options

   ref cannot hold string values is false because ref can hold strings. Missing parentheses when calling ref is false because ref is called correctly. No import statement for ref is false because import is present.

3. Final Answer:

   You cannot reassign a ref variable directly; must update .value -> Option A

4. Quick Check:

   Update ref.value, not ref variable = C [OK]

Hint: Change .value property, not the ref variable itself [OK]

Common Mistakes:

• Reassigning ref variable instead of .value
• Thinking ref can't hold strings
• Missing import statement

5. You want to create a reactive counter that increments only if the current count is less than 10. Which Vue code correctly implements this using ref?

hard

A. let count = ref(0);
if (count.value <= 10) {
count.value += 1;
}

B. const count = ref(0);
if (count < 10) {
count++;
}

C. const count = reactive(0);
if (count.value < 10) {
count.value++;
}

D. const count = ref(0);
if (count.value < 10) {
count.value++;
}

Solution

1. Step 1: Use ref and access .value correctly

   const count = ref(0); if (count.value < 10) { count.value++; } correctly declares count with ref(0) and checks count.value < 10 before incrementing count.value++.

2. Step 2: Identify errors in other options

   const count = ref(0); if (count < 10) { count++; } incorrectly compares and increments count without .value. const count = reactive(0); if (count.value < 10) { count.value++; } uses reactive with a primitive, which is incorrect. let count = ref(0); if (count.value <= 10) { count.value += 1; } uses let (allowed but less preferred) and checks <= 10, which allows increment at 10, violating the condition.

3. Final Answer:

   const count = ref(0); if (count.value < 10) { count.value++; } -> Option D

4. Quick Check:

   Use ref with .value and correct condition = A [OK]

Hint: Always use .value to read and write ref data [OK]

Common Mistakes:

• Forgetting .value when reading or writing
• Using reactive() for primitives
• Incorrect comparison operators