title: Vue v-bind:class not working immediately when changing the binded object's value
body: <p>In the Vue, to add the dynamical class to the element, I think that the developers use the <code>v-bind:class</code>.<br>
  But in the below example, the <code>v-bind:class</code> doesn't work properly.  </p>
  
  <pre><code>//Html
  &lt;div id="mainapp"&gt;
    &lt;span class="star" v-bind:class="{gold:obj.selected}" v-on:click="clickStar()"&gt;star&lt;/span&gt;
  &lt;/div&gt;
  
  //Script
  var app = new Vue({
    el:"#mainapp",
    data:{
      obj:{}  
    },
    methods:{
      clickStar:function(){
        if(this.obj.selected == undefined) this.obj.selected =false;
        //this.obj.selected=!this.obj.selected;
        this.$set(this.obj, 'selected', !this.obj.selected);
        console.log(this.obj);
      }
    }
  })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/trge2hu5/8/" rel="nofollow noreferrer">JsFiddle Example</a></p>
  
  <p>When clicking the element , <code>span</code> tag, the <code>obj.selected</code> value is changed by the <code>clickStar</code> function.<br>
  But v-bind:class doesn't work though <code>$set</code> is used when changing the <code>obj</code>.<br>
  <a href="https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating" rel="nofollow noreferrer">Reason that Dom is not updated</a><br>
  What am I wrong?
  How could I solve this issue?</p>