Reactive Map and Set in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when updating a reactive Map in Vue?

Consider the following Vue 3 component using the Composition API and a reactive Map. What will be displayed after clicking the button once?

Vue

import { reactive } from 'vue';

export default {
  setup() {
    const map = reactive(new Map([['a', 1]]));
    function update() {
      map.set('a', map.get('a') + 1);
    }
    return { map, update };
  },
  template: `<div><button @click="update">Update</button><p>{{ map.get('a') }}</p></div>`
}

A 1

B NaN

C undefined

D 2

💡 Hint

Remember that reactive Map tracks changes to its entries and updates the template accordingly.

The reactive Map initially has 'a' mapped to 1. Clicking the button calls update(), which increments the value to 2. Vue tracks this change and updates the displayed value.

❓ state_output

intermediate

How many items are in the reactive Set after adding duplicates?

Given this Vue 3 setup with a reactive Set, what is the size of the Set after running addItems()?

Vue

import { reactive } from 'vue';

export default {
  setup() {
    const set = reactive(new Set());
    function addItems() {
      set.add('apple');
      set.add('banana');
      set.add('apple');
    }
    addItems();
    return { set };
  },
  template: `<p>Set size: {{ set.size }}</p>`
}

A 2

B 3

C 1

D 0

💡 Hint

Sets do not allow duplicate entries.

The Set adds 'apple' and 'banana'. Adding 'apple' again does not increase size. So size is 2.

📝 Syntax

advanced

Which option correctly creates a reactive Map and updates it in Vue 3?

Select the code snippet that correctly creates a reactive Map and updates a key's value so Vue tracks the change.

A const map = reactive(new Map()); map['key'] = 'value'; map['key'] = 'newValue';

B const map = reactive(new Map()); map.set('key', 'value'); map.set('key', 'newValue');

C const map = reactive({}); map.set('key', 'value'); map.set('key', 'newValue');

D const map = reactive(new Map()); map.key = 'value'; map.key = 'newValue';

💡 Hint

Remember that Map methods like set() must be used to update entries.

Option B uses reactive with a Map and updates entries with set(), which Vue tracks. Options B and D try to use object syntax on Map, which doesn't work. Option B uses reactive on an object, not a Map, so set() is undefined.

🔧 Debug

advanced

Why does this Set not trigger updates in Vue?

This Vue 3 component uses a Set but the template does not update when items are added. What is the cause?

Vue

import { reactive } from 'vue';

export default {
  setup() {
    const set = new Set();
    function addItem(item) {
      set.add(item);
    }
    return { set, addItem };
  },
  template: `<div><button @click="addItem('x')">Add</button><p>Count: {{ set.size }}</p></div>`
}

A Vue does not track mutations on plain Set objects using methods like add(), so template won't update.

B The reactive() function cannot wrap Set objects at all.

C The template syntax {{ set.size }} is invalid for Sets.

D The addItem function is not called correctly in the template.

💡 Hint

Check if Vue tracks changes made by Set methods and if the Set is reactive.

Vue 3 tracks mutations on reactive Set instances via methods like add(), but plain Set objects (without reactive()) are not tracked by Vue's reactivity system.

🧠 Conceptual

expert

What is the best way to iterate a reactive Map in Vue 3 templates?

Vue 3 tracks changes to reactive Maps via set(), but to iterate over entries in a template (e.g., with v-for), which approach ensures Vue tracks changes and updates the template correctly?

A Use a shallow reactive Map and manually trigger a dummy ref update after set().

B Replace the entire Map with a new reactive Map instance on each update.

C Use a computed property that returns Array.from(map.entries()) and render that in the template.

D Wrap the Map in a ref and update the ref's value with a new Map copy on each change.

💡 Hint

Think about how Vue handles iteration over Map/Set in templates.

Direct v-for on Map/Set doesn't support reactive iteration. Using a computed property to convert to Array.from(map.entries()) allows Vue to track changes and re-render properly. Other options add unnecessary overhead.

Practice

1. Which Vue function should you use to make a Map reactive so that UI updates when it changes?

easy

A. computed()

B. ref()

C. watch()

D. reactive()

Solution

1. Step 1: Understand Vue reactivity basics

   Vue's reactive() wraps objects like Map or Set to track changes.

2. Step 2: Identify correct function for Map reactivity

   Only reactive() can wrap Map to make it reactive, so UI updates on mutations.

3. Final Answer:

   reactive() -> Option D

4. Quick Check:

   Wrap Map with reactive() = C [OK]

Hint: Use reactive() to wrap Map or Set for reactivity [OK]

Common Mistakes:

• Using ref() which works for primitives, not Map/Set
• Confusing computed() with reactive()
• Trying watch() to make Map reactive

2. Which of the following is the correct syntax to create a reactive Set in Vue?

easy

A. const mySet = reactive(new Set())

B. const mySet = ref(new Set())

C. const mySet = reactive(Set())

D. const mySet = reactive([])

Solution

1. Step 1: Check how to create reactive Set

   You must create a new Set instance and wrap it with reactive().

2. Step 2: Identify correct syntax

   reactive(new Set()) is correct; Set() without new is invalid, and ref() wraps primitives.

3. Final Answer:

   const mySet = reactive(new Set()) -> Option A

4. Quick Check:

   Use new Set() inside reactive() = B [OK]

Hint: Always use new Set() inside reactive() for reactive Sets [OK]

Common Mistakes:

• Omitting new keyword for Set
• Using ref() instead of reactive() for Set
• Wrapping an array instead of Set

3. Given this Vue setup:

const myMap = reactive(new Map());
myMap.set('a', 1);
myMap.set('b', 2);
myMap.delete('a');
console.log([...myMap.keys()]);

What will be logged to the console?

medium

A. ['b']

B. ['a', 'b']

C. []

D. ['a']

Solution

1. Step 1: Track Map mutations

   Initially, keys 'a' and 'b' are added. Then 'a' is deleted.

2. Step 2: Determine final keys

   After deletion, only 'b' remains as a key in the Map.

3. Final Answer:

   ['b'] -> Option A

4. Quick Check:

   Deleted 'a', keys left = ['b'] [OK]

Hint: Deleting a key removes it from Map keys list [OK]

Common Mistakes:

• Forgetting the delete call removes 'a'
• Assuming keys remain unchanged after mutation
• Confusing keys() with values()

4. What is wrong with this Vue code that tries to make a reactive Map?

const myMap = reactive(Map());
myMap.set('key', 'value');

medium

A. reactive() cannot wrap Map

B. Map() must be called with new keyword

C. set() method does not exist on Map

D. Missing ref() wrapper

Solution

1. Step 1: Check Map instantiation syntax

   Map must be created with new Map(), not just Map().

2. Step 2: Identify error cause

   Calling Map() without new causes a TypeError or unexpected behavior.

3. Final Answer:

   Map() must be called with new keyword -> Option B

4. Quick Check:

   Use new Map() to create Map instance [OK]

Hint: Always use new Map() to create Map instances [OK]

Common Mistakes:

• Omitting new keyword for Map
• Thinking reactive() can't wrap Map
• Using ref() instead of reactive()

5. You have a reactive Set in Vue:

const mySet = reactive(new Set(['apple', 'banana']));

// Later in code
mySet.add('banana');
mySet.delete('apple');

const items = [...mySet];

What will be the value of items after these operations?

hard

A. ['apple', 'banana', 'banana']

B. ['banana', 'apple']

C. ['banana']

D. ['apple']

Solution

1. Step 1: Understand Set behavior with duplicates

   Sets only store unique values, so adding 'banana' again does nothing.

2. Step 2: Track mutations

   Initially contains 'apple' and 'banana'. After deleting 'apple', only 'banana' remains.

3. Final Answer:

   ['banana'] -> Option C

4. Quick Check:

   Set keeps unique items, deleted 'apple' = ['banana'] [OK]

Hint: Sets ignore duplicate adds and remove items on delete [OK]

Common Mistakes:

• Assuming duplicates appear in Set
• Forgetting delete removes item
• Confusing Set with Array behavior