Reactivity transform and limitations in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does reactivity transform affect ref unwrapping in templates?

Consider a Vue 3 component using reactivity transform. What will be the rendered output of the template if count is a ref initialized to 5 and incremented by 1 before rendering?

Vue

<script setup lang="ts" reactivitytransform>
let count = $ref(5)
count++
</script>
<template>
  <p>{{ count }}</p>
</template>

A <p>6</p>

B <p>5</p>

C <p>[object Object]</p>

D <p>undefined</p>

💡 Hint

Reactivity transform unwraps refs automatically in templates.

With reactivity transform, refs are unwrapped automatically in templates, so count is treated as its inner value. Incrementing count changes the value from 5 to 6, which is displayed.

📝 Syntax

intermediate

Which code snippet correctly uses reactivity transform to create a reactive object?

Select the code that correctly creates a reactive object using Vue's reactivity transform syntax.

A let user = reactive({ name: 'Alice', age: 30 })

B let user = $reactive({ name: 'Alice', age: 30 })

C let user = $ref({ name: 'Alice', age: 30 })

D let user = ref({ name: 'Alice', age: 30 })

💡 Hint

Reactivity transform provides special prefixes for reactive primitives and objects.

The $reactive prefix creates a reactive object with reactivity transform. The reactive and ref functions are standard Vue APIs but not part of reactivity transform syntax.

🔧 Debug

advanced

Why does this reactivity transform code fail to track changes?

Given the code below, why does updating state.count not trigger a template update?

Vue

<script setup lang="ts" reactivitytransform>
let state = { count: $ref(0) }
function increment() {
  state.count++
}
</script>
<template>
  <p>{{ state.count }}</p>
  <button @click="increment">Increment</button>
</template>

A Because <code>$ref</code> cannot be used inside objects with reactivity transform.

B Because the template does not unwrap nested refs automatically.

C Because <code>state.count++</code> syntax is invalid with reactivity transform.

D Because <code>state</code> is a plain object, not reactive, so changes to <code>count</code> are not tracked.

💡 Hint

Reactivity transform requires reactive wrappers for objects to track nested properties.

The state object is a plain JavaScript object. Wrapping count with $ref inside it does not make state reactive. Changes to state.count are not tracked, so the template does not update.

🧠 Conceptual

advanced

What is a key limitation of Vue's reactivity transform regarding arrays?

Which statement best describes a limitation of reactivity transform when working with arrays?

A Reactivity transform does not track mutations made by direct index assignment like <code>arr[0] = value</code>.

B Reactivity transform disables reactivity for array methods like <code>push</code> and <code>pop</code>.

C Reactivity transform requires arrays to be wrapped with <code>$ref</code> to be reactive.

D Reactivity transform cannot unwrap refs inside arrays automatically.

💡 Hint

Think about how Vue tracks changes to array elements.

Vue's reactivity system cannot detect changes made by direct index assignment on arrays (e.g., arr[0] = newValue). This limitation remains with reactivity transform. Instead, methods like splice or push should be used.

❓ state_output

expert

What is the final value of count after this reactivity transform code runs?

Analyze the code below and determine the final value of count after all statements execute.

Vue

<script setup lang="ts" reactivitytransform>
let count = $ref(1)
function update() {
  count += 2
  count = count * 3
}
update()
</script>

A 6

B 7

C 9

D 3

💡 Hint

Follow the arithmetic step by step.

Starting with count = 1, after count += 2, count is 3. Then count = count * 3 makes it 9.

Practice

1. What is the main benefit of Vue's Reactivity Transform feature?

easy

A. It allows writing reactive code without using .value on refs.

B. It automatically converts all variables to reactive objects.

C. It removes the need for any imports in Vue components.

D. It disables reactivity for better performance.

Solution

1. Step 1: Understand Reactivity Transform purpose

   Reactivity Transform lets you write reactive code without explicitly accessing .value on refs.

2. Step 2: Compare options

   Only It allows writing reactive code without using .value on refs. correctly states this benefit. Other options are incorrect or unrelated.

3. Final Answer:

   It allows writing reactive code without using .value on refs. -> Option A

4. Quick Check:

   Reactivity Transform = no .value needed [OK]

Hint: Reactivity Transform removes .value usage on refs [OK]

Common Mistakes:

• Thinking it disables reactivity
• Assuming it auto-reactivates all variables
• Believing it removes all imports

2. Which syntax correctly declares a reactive primitive using Reactivity Transform in Vue?

easy

A. const count = reactive(0)

B. const count = ref(0)

C. const count = $ref(0)

D. const count = $reactive(0)

Solution

1. Step 1: Identify correct Reactivity Transform syntax for primitives

   For primitives, Reactivity Transform uses $ref to declare reactive variables.

2. Step 2: Check options

   const count = $ref(0) uses $ref(0), which is correct. const count = ref(0) uses classic ref, not Reactivity Transform. Options A, C, and D are incorrect for primitives.

3. Final Answer:

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

4. Quick Check:

   Primitive reactive = $ref() [OK]

Hint: Use $ref() for primitives in Reactivity Transform [OK]

Common Mistakes:

• Using reactive() for primitives
• Confusing $reactive with $ref
• Using classic ref() instead of $ref()

3. Given the code:

import { $ref } from 'vue'
const count = $ref(1)
count++
console.log(count)

What will be logged to the console?

medium

A. 1

B. undefined

C. Error: count is not reactive

D. 2

Solution

1. Step 1: Understand $ref behavior

   $ref creates a reactive primitive that can be used without .value. Incrementing count directly updates its value.

2. Step 2: Trace code execution

   count starts at 1, then count++ increments it to 2, so console.log(count) outputs 2.

3. Final Answer:

   2 -> Option D

4. Quick Check:

   Increment $ref count logs 2 [OK]

Hint: Increment $ref variable directly without .value [OK]

Common Mistakes:

• Expecting .value usage
• Thinking count remains 1
• Assuming runtime error

4. What is the main issue with this Vue Reactivity Transform code?

import { $reactive } from 'vue'
const state = $reactive({ count: 0 })
state.count++
console.log(state.count)

medium

A. You cannot increment properties on $reactive objects.

B. Reactivity Transform requires enabling in config before using $reactive.

C. You must use .value to access properties on $reactive objects.

D. The $reactive function only works with primitives, not objects.

Solution

1. Step 1: Check Reactivity Transform usage requirements

   $reactive requires enabling Reactivity Transform in Vue config before usage.

2. Step 2: Analyze code behavior

   Without enabling config, $reactive usage causes errors or unexpected behavior.

3. Final Answer:

   Reactivity Transform requires enabling in config before using $reactive. -> Option B

4. Quick Check:

   Enable config for $reactive use [OK]

Hint: Enable Reactivity Transform in config before using $reactive [OK]

Common Mistakes:

• Thinking $reactive works without config
• Using .value on $reactive objects
• Believing $reactive only works with primitives

5. Which of the following is a limitation of Vue's Reactivity Transform when working with complex nested objects?

hard

A. It cannot track changes on deeply nested properties without manual $reactive wrapping.

B. It automatically unwraps all nested objects, causing performance issues.

C. It requires using .value for nested reactive properties.

D. It disables reactivity on nested arrays.

Solution

1. Step 1: Understand Reactivity Transform limitations on nested objects

   Reactivity Transform does not automatically make deeply nested properties reactive unless wrapped with $reactive.

2. Step 2: Evaluate options

   It cannot track changes on deeply nested properties without manual $reactive wrapping. correctly states this limitation. Options B, C, and D are incorrect or false statements.

3. Final Answer:

   It cannot track changes on deeply nested properties without manual $reactive wrapping. -> Option A

4. Quick Check:

   Deep nested reactivity needs manual $reactive [OK]

Hint: Wrap nested objects with $reactive to track changes [OK]

Common Mistakes:

• Assuming all nested properties are reactive automatically
• Using .value on nested objects
• Believing Reactivity Transform disables nested arrays