Vue-loader: $set method doesn't seem to be working within components

[matt-sanders]

Hi all.

I've been getting errors when trying to use $set from within a component. As an example, start with the webpack-simple template and edit App.vue to become:

<template>
  <div id="app">
    <button @click.prevent="checkSet">Some Text</button>
  </div>
</template>

<script>
export default {
   methods: {
      checkSet: function(){
         this.$set('test', 'testing');
      },
  } 
   data() {
      return{
         foo: 'bar'
      }
   }
}
</script>

Whenever checkSet is run I get the following:
vue.common.js?e881:1117 Uncaught TypeError: Cannot create property 'testing' on string 'test'

Am I just missing something here?
Thanks for your help.

[JounQin]

You should use Vue.$set instead in Vue2.0.
https://github.com/vuejs/vue/issues/2873

[matt-sanders]

I did try but got the same error

import Vue from 'vue';
...
checkSet: function(){
   Vue.set('test', 'testing');
}

[matt-sanders]

thanks to tribex for the solution on gitter:

export default {
   methods: {
      checkSet: function(){
         this.$set(this.form, 'test', 'testing');
         //or Vue.set
      },
  } 
   data() {
      return{
         form: {
            foo: 'bar'
         }
      }
   }
}

[JoshTheDerf]

For future reference everyone, the syntax is now:

Vue.set(object, key, value) // this.$set is now an alias to the global Vue.set

Fixed version of @matt-sanders example:

import Vue from 'vue';
...
checkSet: function(){
   Vue.set(this.data, 'test', 'testing');
}

Docs: http://rc.vuejs.org/api/#Vue-set

Hope that helps!