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.