title: Vue template doesn't update
body: <p>I'm building my first project in VueJS, and I'm having trouble getting a template to show/hide using v-if. I have a data model boolean variable (groups.categories.descEditable) that I am toggling to show/hide a template. For some reason the template isn't reactively updating itself when I change that value.</p>
  
  <pre><code>&lt;tbody v-for="group in groups"&gt;
      ...
      &lt;tr v-for="cat in group.categories"&gt;
         ...
          &lt;td class="td-indent"&gt;
              &lt;input v-if="cat.descEditable" :value="cat.description" type="text" class="form-control"&gt;
  
              &lt;div v-else v-on:click="editDesc(cat.id)"&gt;{{ cat.description }}&lt;/div&gt;
  
  
              &lt;div&gt;{{cat.descEditable}}&lt;/div&gt;
          &lt;/td&gt;
          ...
      &lt;/tr&gt;
  &lt;/tbody&gt;
  
  
  methods: {
      editDesc (cat_id) {
  
          let vm = this
  
          this.groups.forEach(function(group, gr_ind){
              group.categories.forEach(function(cat, ind) {
  
                  if (cat_id == cat.id)
                      cat.descEditable = true
                  else 
                      cat.descEditable = false
              })
          })
      }
  },
  </code></pre>
  
  <p>So I would like the text input to show if descEditable is true (once the div containing the description is clicked), otherwise show the div with the static description value. The descEditable property seems to be updating properly, but the v-if on the input element isn't reacting to it. I must be misunderstanding something fundamental to vuejs, just can't figure out what it is.</p>