'How do I do Vue.set() in Vue 3?

As explained here, Vue 3 has moved a bunch of functions that were available on the global Vue instance. They are now named imports. This leads me to think I should be able to do import {set} from 'vue', but I can't. It's not there. Where is set()?

vue.jsvuejs3


Solution 1:[1]

This article will help you to understand why we needed vue.set in the first place. In short, you need it so that you could add a new property to a data object without breaking the reactivity.

With Vue 3, you no longer need to worry about breaking the reactivity. What the article says you shouldn't do in Vue 2, you can now do in Vue 3.

Example on vue 2:

data() {
  return {
    personObject: {
      name: 'John Doe'
    }
  }
},
methods: {
  addBio(bio) {
     this.$set(this.personObject, 'bio', bio)  // this was needed on vue 2
}

Now, on Vue 3 you can add the bio property directly to the object and the object will still be reactive:

methods: {
  addBio(bio) {
     this.personObject['bio'] = bio
  }
}

Solution 2:[2]

This article talks about reactivity in vue 2 and 3(composition + options API)

You won't need to because vue 3 now uses proxy detection. If you are using a watch and it is not working use the tag deep: true

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Michael Giovanni Pumo
Solution 2 Mithsew

Related Questions