Shallow ref and shallow reactive in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when updating a nested property in a shallow reactive object?

Consider this Vue 3 code using shallowReactive:

const state = shallowReactive({ user: { name: 'Alice', age: 30 } })

state.user.name = 'Bob'

What will Vue track and update reactively?

A Only the top-level <code>user</code> property is reactive; nested changes like <code>name</code> are not tracked.

B Both top-level and nested properties like <code>name</code> are fully reactive and tracked.

C No properties are reactive; <code>shallowReactive</code> disables all reactivity.

D Only nested properties like <code>name</code> are reactive; the top-level <code>user</code> is not.

💡 Hint

Think about what shallow means in this context.

shallowReactive makes only the top-level properties reactive. Nested objects inside are not converted to reactive proxies, so changes inside them are not tracked.

❓ state_output

intermediate

What is the output after modifying a shallow ref's nested object?

Given this Vue 3 code:

const user = shallowRef({ name: 'Alice', age: 30 })
user.value.name = 'Bob'
console.log(user.value.name)

What will be logged?

A 'Bob'

B 'Alice'

C undefined

D Throws a runtime error

💡 Hint

Consider how shallowRef treats the wrapped object and its nested properties.

shallowRef wraps the object shallowly, so the reference itself is reactive but nested properties are not. However, you can still mutate nested properties directly, and the change will be visible when accessing user.value.name.

📝 Syntax

advanced

Which code correctly creates a shallow reactive object with a nested array?

Choose the correct Vue 3 code snippet that creates a shallow reactive object with a nested array, so only the top-level object is reactive but the array is not deeply reactive.

A const data = reactive({ items: [1, 2, 3] })

B const data = shallowRef({ items: reactive([1, 2, 3]) })

C const data = shallowReactive({ items: [1, 2, 3] })

D const data = reactive({ items: shallowRef([1, 2, 3]) })

💡 Hint

Remember that shallowReactive only makes the top-level reactive.

Option C uses shallowReactive on the top-level object, so items array is not deeply reactive. Other options either deeply reactive or mix shallowRef/reactive incorrectly.

🔧 Debug

advanced

Why does this shallowRef nested change not trigger updates?

Look at this Vue 3 code:

const state = shallowRef({ count: 0, nested: { value: 10 } })

function increment() {
  state.value.nested.value++
}

Why might Vue not update the UI when increment() is called?

A Because Vue 3 does not support reactivity on objects inside refs.

B Because <code>nested</code> is not initialized as a reactive object.

C Because <code>increment</code> function is missing a call to <code>state.value = {...state.value}</code> to trigger reactivity.

D Because <code>shallowRef</code> only tracks changes to the reference itself, not nested properties.

💡 Hint

Think about what triggers Vue's reactivity system for refs.

shallowRef tracks changes only when the reference itself changes. Mutating nested properties does not trigger updates because Vue does not track deep changes inside shallow refs.

🧠 Conceptual

expert

Which statement best describes the difference between shallowRef and shallowReactive?

Choose the most accurate description of how shallowRef and shallowReactive differ in Vue 3 reactivity.

A <code>shallowRef</code> deeply tracks nested properties; <code>shallowReactive</code> only tracks the reference itself.

B <code>shallowRef</code> creates a reactive reference to a value without making nested properties reactive; <code>shallowReactive</code> creates a reactive proxy for an object but only tracks top-level properties, not nested ones.

C <code>shallowRef</code> and <code>shallowReactive</code> behave identically and can be used interchangeably.

D <code>shallowReactive</code> creates a reactive reference; <code>shallowRef</code> creates a reactive proxy object.

💡 Hint

Focus on what each function returns and how deep their reactivity goes.

shallowRef returns a reactive reference object whose value is not deeply reactive. shallowReactive returns a reactive proxy object that tracks only top-level properties, ignoring nested ones.