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 in v-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.js with information that Set is
mySet: new Set(),
// By using `mySetChangeTracker` we tell vue.js that this property depends on it,
// so it gets re-evaluated whenever `mySetChangeTracker` changes
return this.mySetChangeTracker && Array.from(this.mySet);
// Trigger vue.js 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.
As far as I know, Vue’s reactivity tracks assignations. If you perform an assignation on the set, it should track reactivity, for example:
this.mySet = new Set(this.mySet.add(item));
This gives you a cleaner code, but with an obvious problem: performance.
Just pick the solution according to the needs :)