title: vuejs v-bind:class on a v-for not updating
body: <p>have this code</p>
  
  <pre><code>&lt;span v-for="tag in ref.tags" @mouseenter="tag.pop=true;tag.adjust($event)" @mouseleave="tag.pop=false" &gt;
      &lt;span  :class="tag.pop? 'ref-tag-pop' : 'tag'"&gt;@{{tag.name}}&lt;/span&gt;
      &lt;div v-show="tag.pop"&gt;@{{tag.info}}&lt;/div&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>It's basically a popup on hover.
  It works fine, but when I add a new "tag", although I see the new tag added to screen, the hover isn't working for it.</p>
  
  <p>When I look in the vue devtools I can see that for the original tags the true and false change dynamically while the new tag doesn't. Although, if I remove the mouseleave event and refresh the devtools I can see the tag.pop does change to true.
  If I then hover over one of the old ones both old and new popups show up, so I think it's a change detection problem.</p>
  
  <p>I tried to change the mouseenter to $set(tag,'pop',true), but everything is acting the same way.
  I also tried to use the $set for the adding of the new tag, even though the tag was rendered into screen, but still, nothing changed.</p>
  
  <p>I'm not sure what else to do, any suggestions? </p>
  
  <p>Edit:
  Code for adding a new tab:</p>
  
  <pre><code>    submitTab: function(){
              this.form="";
              this.addedObj.name=document.getElementById("fNewTagTitle").value;
              this.addedObj.info=document.getElementById("fNewTagInfo").value;
              if (!this.isEditMode)
                  this.isEditMode=true;
              this.editMode.add.tags.push(this.addedObj);
              this.addedObj.pop=false;
              this.addedObj.adjust= function(event) {
                  left=event.target.offsetLeft;
                  div=event.target.lastChild;
                  div.style.left = -left+14+"px";
              };
              ref= this.addedObj.tagRef;
              delete this.addedObj.tagRef;
              this.$set(ref.tags,ref.tags.length, this.addedObj);
  
              this.addedObj='';
              },
  </code></pre>
  
  <p>Edit 2:</p>
  
  <p>Initial load of refs</p>
  
  <pre><code>        loadRefs:function(){
              this.$http.get(this.url + "/refs").then(
                  function (result) {
                      data = JSON.parse(result.body);
                      var last =0;
                      for  (item of data){
                          if (item.ref_id!= last){
                              if (last!=0)
                                  this.refs.push(ref);
                              var ref = new Object();
                              ref.show=false;
                              ref.refId=item.ref_id;
                              ref.type=item.ref_type_id;
                              ref.title=item.title;
                              ref.author=item.author;
                              ref.edition=item.edition;
                              ref.source=item.source;
                              ref.date=item.date;
                              ref.journal=item.journal;
                              ref.year=item.year;
                              ref.page=item.page;
                              ref.publisher=item.publisher;
                              ref.outlet=item.outlet;
                              ref.undersigned=item.undersigned;
                              ref.representing=item.representing;                         
                              ref.URL=item.URL;
                              ref.created_at=item.created_at;
                              ref.username=item.username;
                              ref.score=item.score;
                              ref.support=item.pivot.support;                                 
                              ref.tags=[];                
                          }
                          ref.tags.push({ name:item.tag_name, info: item.tag_info, pop:false, adjust: function(event) {
                              left=event.target.offsetLeft;
                              div=event.target.lastChild;
                              div.style.left = -left+14+"px";
                           }, });
                          last=item.ref_id;
                      }
                      if (data.length&gt;0)
                          this.refs.push(ref);
                  },
                  function(result) {
                      alert( "error" );//XXX add error function
                  }
              )
          }, 
  </code></pre>
  
  <p>It's also declared in the Data section.</p>
  
  <p>BTW I added the <em>v-for</em> a <em>:key</em> but it didn't change anything.</p>