# [Vue.js] Does Vue support reactivity on Map and Set data types? Subscribe to RSS

The docs for Vue.js mention the smart auto-change-tracking for plain Javascript objects:

When you pass a plain JavaScript object to a vue.js instance as its data option, Vue.js will walk through all of its properties and convert them to getter/setters using Object.defineProperty.

Since Javascript’s Map and Set datatypes are designed to be used with their in-built get/set methods, how can I get vue.js to track calls (and therefore, changes) to the internal state of Maps and Sets?

### Solution :

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
updated:

data() {
mySetChangeTracker: 1,
mySet: new Set(),
},

computed: {
mySetAsList() {
// 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);
},
},

methods: {
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.

### Solution 2:

As far as I know, Vue’s reactivity tracks assignations. If you perform an assignation on the set, it should track reactivity, for example:

methods: {