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.

Practice

1. What does the readonly function do in Vue's reactivity system?

easy

A. It creates an immutable reactive object that cannot be changed directly.

B. It makes a reactive object completely non-reactive and static.

C. It clones the reactive object and allows changes only on the clone.

D. It converts a reactive object into a plain JavaScript object.

Solution

1. Step 1: Understand the purpose of readonly

   The readonly function wraps a reactive object to prevent direct modifications, making it immutable.

2. Step 2: Compare with other behaviors

   Unlike cloning or removing reactivity, readonly keeps the object reactive but disallows changes.

3. Final Answer:

   It creates an immutable reactive object that cannot be changed directly. -> Option A

4. Quick Check:

   Readonly = Immutable reactive object [OK]

Hint: Readonly means no direct changes allowed on reactive data [OK]

Common Mistakes:

• Thinking readonly removes reactivity completely
• Assuming readonly clones data instead of wrapping
• Believing readonly allows changes on the wrapped object

2. Which of the following is the correct way to create a readonly reactive object in Vue?

easy

A. const data = readonly({ count: 0 })

B. const data = readonly(reactive({ count: 0 }))

C. const data = reactive(readonly({ count: 0 }))

D. const data = reactive({ count: 0 }).readonly()

Solution

1. Step 1: Understand the correct usage order

   You first create a reactive object, then wrap it with readonly to make it immutable.

2. Step 2: Evaluate each option

   const data = readonly(reactive({ count: 0 })) correctly wraps a reactive object with readonly. const data = reactive(readonly({ count: 0 })) tries to make a readonly object reactive, which is invalid. const data = readonly({ count: 0 }) skips reactive, so no reactivity. const data = reactive({ count: 0 }).readonly() uses a non-existent method.

3. Final Answer:

   const data = readonly(reactive({ count: 0 })) -> Option B

4. Quick Check:

   Wrap reactive with readonly = const data = readonly(reactive({ count: 0 })) [OK]

Hint: Wrap reactive() inside readonly() to make immutable reactive [OK]

Common Mistakes:

• Calling readonly before reactive
• Skipping reactive and only using readonly
• Using non-existent readonly method on reactive

3. Given the code below, what will be logged to the console?

const state = reactive({ count: 1 });
const readOnlyState = readonly(state);

readOnlyState.count = 5;
console.log(readOnlyState.count);
state.count = 10;
console.log(readOnlyState.count);

medium

A. Error on assignment, then 10

B. 5 and 10

C. 1 and 1

D. 1 and 10

Solution

1. Step 1: Understand readonly behavior on assignment

   Assigning to readOnlyState.count causes a warning in development mode, but the change is ignored and value remains 1.

2. Step 2: Check reactive source update reflection

   First console.log(readOnlyState.count) outputs 1. Changing state.count to 10 updates the source, so second log is 10.

3. Final Answer:

   1 and 10 -> Option D

4. Quick Check:

   Readonly warns/ignores direct change, reflects source updates [OK]

Hint: Readonly blocks direct changes but shows source updates [OK]

Common Mistakes:

• Expecting readonly to allow direct assignment
• Thinking readonly copies data instead of reflecting source
• Ignoring error/warning on assignment to readonly

4. Identify the error in the following Vue code using readonly:

import { reactive, readonly } from 'vue';
const data = readonly({ count: 0 });
data.count = 1;
console.log(data.count);

medium

A. You cannot assign to a readonly object directly.

B. You must use ref() instead of reactive() for readonly.

C. Readonly does not exist in Vue's API.

D. You must wrap a reactive object with readonly, not a plain object.

Solution

1. Step 1: Check how readonly is used

   The code creates a readonly proxy but then attempts data.count = 1.

2. Step 2: Understand readonly requirements

   Readonly prevents direct mutations, causing a development warning and ignoring the assignment.

3. Final Answer:

   You cannot assign to a readonly object directly. -> Option A

4. Quick Check:

   Cannot mutate readonly objects [OK]

Hint: Readonly objects cannot be mutated directly [OK]

Common Mistakes:

• Attempting to mutate readonly objects directly
• Assuming readonly works without reactive
• Confusing readonly with ref

5. You have a reactive object state shared across components. You want to expose it as readonly to prevent accidental changes but still reflect updates. Which approach correctly achieves this and why?

const state = reactive({ user: { name: 'Alice' }, count: 0 });

// Options:
// A) const safeState = readonly(state);
// B) const safeState = reactive(state);
// C) const safeState = readonly({ ...state });
// D) const safeState = reactive(readonly(state));

hard

A. Create a shallow copy and make it readonly, but it won't reflect nested updates.

B. Wrap the reactive state with readonly to prevent direct changes but reflect updates.

C. Wrap the state again with reactive, which allows changes and duplicates reactivity.

D. Wrap readonly with reactive, which is invalid and causes errors.

Solution

1. Step 1: Analyze each option's effect

   Wrap the reactive state with readonly to prevent direct changes but reflect updates. correctly wraps the reactive object with readonly, making it immutable but still reactive to source changes. Wrap the state again with reactive, which allows changes and duplicates reactivity. duplicates reactivity and allows changes. Create a shallow copy and make it readonly, but it won't reflect nested updates. creates a shallow copy, losing nested reactivity. Wrap readonly with reactive, which is invalid and causes errors. is invalid usage.

2. Step 2: Confirm correct approach for safe sharing

   Readonly wrapping reactive is the recommended way to share data safely without allowing modifications but reflecting updates.

3. Final Answer:

   Wrap the reactive state with readonly to prevent direct changes but reflect updates. -> Option C

4. Quick Check:

   Readonly wraps reactive for safe, immutable sharing [OK]

Hint: Wrap reactive with readonly to share immutable reactive data [OK]

Common Mistakes:

• Using shallow copies losing nested reactivity
• Wrapping readonly inside reactive incorrectly
• Duplicating reactivity causing unexpected mutations