Readonly for immutable reactive data in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you try to modify a readonly reactive object?

Consider the following Vue 3 code using readonly. What will be the console output after clicking the button?

Vue

import { ref, readonly } from 'vue';

const state = ref({ count: 0 });
const readonlyState = readonly(state.value);

function increment() {
  try {
    readonlyState.count++;
  } catch (e) {
    console.log('Error:', e.message);
  }
}

// Simulate button click
increment();
console.log(readonlyState.count);

A 1

B Error: readonlyState is not reactive

C Error: Cannot assign to read only property 'count' of object '#<Object>'\n0

D 0

💡 Hint

Readonly objects prevent direct modification and throw errors in strict mode.

The readonly wrapper in Vue 3 creates an immutable reactive proxy. Trying to change its properties throws an error in strict mode. The count remains unchanged at 0.

❓ state_output

intermediate

What is the value of the reactive state after wrapping with readonly?

Given this Vue 3 code, what will be the output of the last console.log statement?

Vue

import { reactive, readonly } from 'vue';

const state = reactive({ name: 'Alice' });
const readOnlyState = readonly(state);

state.name = 'Bob';
console.log(readOnlyState.name);

A 'Bob'

B 'Alice'

C undefined

D Error: Cannot assign to readonly property

💡 Hint

Readonly wraps the reactive object but reflects changes made to the original reactive source.

The readonly proxy reflects the current state of the original reactive object. Changing state.name to 'Bob' updates readOnlyState.name as well.

📝 Syntax

advanced

Which code snippet correctly creates a deeply readonly reactive object?

Select the option that creates a deeply readonly reactive object in Vue 3.

A const state = reactive(readonly({ user: { name: 'Eve' } }));

B const state = reactive({ user: readonly({ name: 'Eve' }) });

C const state = readonly({ user: reactive({ name: 'Eve' }) });

D const state = readonly(reactive({ user: { name: 'Eve' } }));

💡 Hint

Readonly should wrap the reactive object to make it deeply readonly.

Wrapping a reactive object with readonly creates a deeply readonly reactive proxy. Option D does this correctly.

🔧 Debug

advanced

Why does this Vue 3 code not prevent mutation of nested properties?

Examine the code below. Why can state.user.name still be changed despite using readonly?

Vue

import { readonly } from 'vue';

const state = {
  user: {
    name: 'John'
  }
};

const readOnlyState = readonly(state);

readOnlyState.user.name = 'Jane';
console.log(readOnlyState.user.name);

A Because readonly does not work on plain objects, only reactive ones.

B Because readonly only makes the top-level object readonly, nested objects remain mutable.

C Because the code is missing a reactive wrapper around state.

D Because readonly only works with refs, not objects.

💡 Hint

Readonly is shallow by default unless wrapping a reactive object.

The readonly function creates a shallow readonly proxy. Nested objects inside a plain object remain mutable unless they are reactive.

🧠 Conceptual

expert

How does Vue 3's readonly differ from Object.freeze for immutability?

Which statement best describes the difference between Vue 3's readonly and JavaScript's Object.freeze when used for immutable data?

A <code>readonly</code> creates a reactive proxy that tracks dependencies and prevents mutations, while <code>Object.freeze</code> only prevents mutations without reactivity.

B <code>readonly</code> freezes the object deeply, while <code>Object.freeze</code> only freezes shallowly.

C <code>readonly</code> works only on refs, <code>Object.freeze</code> works on any object.

D <code>readonly</code> allows mutations but warns in console, <code>Object.freeze</code> throws errors on mutation.

💡 Hint

Think about reactivity and mutation prevention differences.

Vue's readonly creates a reactive proxy that tracks dependencies and prevents mutations, enabling reactive updates. Object.freeze only prevents mutations but does not provide reactivity.