This article was originally published at https://www.telerik.com/blogs/so-what-actually-is-vue-set

Talking about Vue.set is talking about reactivity, so prepare yourself for some theory on this one. However, as always, it doesn't need to be something hard or boring. Find your avocados and chips, make some guacamole, and let's dip right in.

Data and Reactivity

Whenever you create a data() property function inside a Vue component, and return the object back, Vue does a lot of things behind the scenes to hook everything up inside your component and to make it reactive.

export default {
  data() {
   return {
     red: 'hot',
     chili: 'peppers'
   }
  }
}

The first thing that Vue will do here with our awesome awesome awesome RHCP data, is walk through each of the properties of the return { } object, and create a unique getter and setter for each one. The nitty gritty of how this actually happens is beyond the scope of this article, but Vue Mastery has a very nice video explaining this in detail.

The purpose of creating these is so that when you access these properties inside your code, by doing this.red for example, or when setting them with this.red = "hotter" you are actually calling these getters and setters that Vue created for you.

Inside this magical land of SETGET, Vue hooks up your computer properties, watchers, props, data, etc. to become reactive, in super simple terms, a function is called that updates the whole shebang every time the setter is changed.

The pitfall

Awesome! This is what we love about Vue right, its amazing reactivity and under-the-hood power. But there is a dark side here that needs to explored.

Let's change our data a little bit and see what happens when we start trying to work with dynamic data.

data() {
  return {
    members: {}
  }
}

Alright, nothing fancy so far, we have a members property of our data into which we want to add band member information. Now for the sake of example, let's add a method that will pretend to pull some information from a remote http call, that will give us back a JSON object with the band info.

data() {
  return {
    members: {}
  }
},
methods: {
  getMembers() {
   const newMember = {
     name: 'Flea',
     instrument: 'Bass',
     baeLevel: 'A++'
   }; // Some magical method that gives us data got us this sweet info

   // ...
  }
}

Hm. Ok, so looking at this example let's stop and think. There are many ways to resolve this current dilema, how do we add this newMember object into our current members property?

Maybe you're thinking let's turn members into an array and push it, sure, but that's cheating because it breaks my CAREFULLY constructed example that I didn't just make up as I was typing this.

In this scenario, we NEED to have members as an object. Ok, simple - you'd say, let's just add a new property to the members property, it's an object after all. In fact, let's go ahead and make the member's name the name of the property.

getMembers() {
   const newMember = {
     name: 'Flea',
     instrument: 'Bass',
     baeLevel: 'A++' // Totally important property that we will never use
   }; // Some magical method that gives us data got us this sweet info

   this.members[newMember.name] = newMember;
  }

Lok'tar Ogar!

Except, no, because A. this is not Orgrimmar and B. we now have a problem.

If you were to run this code on your browser and test it right now, you will see that you are actually pushing this new data into the members data, but this change to the component state will not actually make any of your application re-render.

In a scenario where you are just using this data for some computation, or for some type of internal storage then doing things this way won't impact your application - however, and this is a huge HOWEVER, if you are using this data reactively on your app to display some information on your page, or for conditional rendering with v-if or v-else then things are going to get funky.

Actually using Vue.set

So now that we understand where the problem is actually coming from, we can learn what is the proper solution. Allow me to introduce you to Vue.set.

Vue.set is a tool that allows us to add a new property to an already reactive object, and makes sure that this new property is ALSO reactive. This completely takes care of the problem that we were experiencing on the other example, because when our new property on members gets set, it will automatically be hooked into Vue's reactivity system, with all the cool getters/setters and Vue-magic behind the scenes.

A small note is however required to understand how this affects arrays. So far we have only really played around with objects, which are super easy to understand. New prop? Add it with Vue.set if you want it to be reactive. Simple.

Following up with our example, let's switch things up to use Vue.set instead.

getMembers() {
   const newMember = {
     name: 'Flea',
     instrument: 'Bass',
     baeLevel: 'A++'
   }; // Some magical method that gives us data got us this sweet info

   //this.members[newMember.name] = newMember;
     this.$set(this.members, newMember.name, newMember);
  }

This bit is new this.$set(this.members, newMember.name, newMember);

There's two things I want to mention for this piece of code. I've been telling you so far that Vue.set is how we are going to be doing things, but now im using this.$set, but fear not - this is only an alias, so it will do and behave in the exact same way. The cool thing, is that you don't have to import Vue inside your components to use it.

The second thing I want to make note of is the syntax of this function. It takes three paramters, the object or array which we are going to modify (in this case this.members).

A second paramter which points to the property or key of the first object/array that we passed (so newMember.name because we want it to be dynamic).

And finally a third paramter which is the value we want to set into it. (In our case, newMember).

         this.members [newMember.name] = newMember;
//            V               V              V
this.$set(this.members, newMember.name,   newMember);

(PS. My ASCII skills are not for sale ^)

But what's up with array reactivity?

When we create an array inside the initial state, Vue sets it up to be reactive for us, however Vue is unable to currently detect when you directly assign a value using an index. For example, if we were doing this:

this.membersArray[3] = myNewValue;

Then Vue won't be able to detect this change, and thus it would not be reactive. Please keep in mind that if you modify arrays with operations like pop, splice, push then those operations WILL trigger reactivity on the arrays, so you can safely use those.

In the off case that you need to set an index value directly, we have Vue.set to help us out. Let's see how that would look on our previous example.

this.$set(this.membersArray, 3, myNewValue)

If you want to read more about all the reactivity caveats check out this link to the official documentation

Vue 3.0

This is all still subject to change at the time of this writing, but the word on the street is that these caveats will no longer be an issue. In other words, in Vue 3.0 you will be safe to forget about these edge cases completely, with the exception of those poor souls that still have to target some old browsers that will not fully support the new reactivity system.