Vue.js does not support reactivity on Map and Set data types (yet?).
The feature ticket has some discussion and this work around (by user “inca”):
Sets and Maps are not observable by Vue. In order to use those —
either inv-for, or in computed properties, methods, watchers,
template expressions, etc. — you need to create a serializable replica
of this structure and expose it to Vue. Here’s a naive example which
uses a simple counter for providing Vue with information thatSetis
updated:data() { mySetChangeTracker: 1, mySet: new Set(), }, computed: { mySetAsList() { // By using `mySetChangeTracker` we tell Vue that this property depends on it, // so it gets re-evaluated whenever `mySetChangeTracker` changes return this.mySetChangeTracker && Array.from(this.mySet); }, }, methods: { add(item) { this.mySet.add(item); // Trigger Vue updates this.mySetChangeTracker += 1; } }This illustrates a kinda hacky but 100% working method for making
non-observable data reactive. Still, in real world cases I ended up
with serialized versions of Sets/Maps (e.g. you’d probably want to
store the modified versions of sets/maps in localstorage and thus
serialize them anyway), so no artificial counters/hacks were involved.