title: Vue.js 'v-bind:class' doesn't update even though model does
body: <p>I've got a list of items, and i want to apply a style to the currently selected one. I'm also using Vuex to manage the state.</p>
  
  <p>My list component:</p>
  
  <pre><code>const List = Vue.component('list', {
      template:
              '&lt;template v-if="items.length &gt; 0"&gt;' +
                  '&lt;ul class="list-group md-col-12"&gt;' +
                      '&lt;a href="#" v-for="(item, index) in items" class="list-group-item list-group-item-action" v-bind:class="{ active: item.isActive }" v-on:click="selectItem(index);"&gt;{{ g.text }}&lt;/a&gt;' +
                  '&lt;/ul&gt;' +
              '&lt;/template&gt;'
      computed: {
          items: function() {
              return this.$store.state.items;
          }
      },
      methods: {
          selectItem: function (index) {
              this.$store.commit('selectItem', index);
          }
      }
  });
  </code></pre>
  
  <p>My store:</p>
  
  <pre><code>const store = new Vuex.Store({
      state: {
          items: [],
          currentIndex: -1
      },
      mutations: {
          selectItem: function(state, index) {
              if (index === state.currentIndex) {
                  return;
              }
              if (state.currentIndex &gt; -1) {
                  delete state.items[state.currentIndex].isActive;
              }
              state.currentIndex = index;
              state.items[state.currentIndex].isActive = true;
          }
      }
  });
  </code></pre>
  
  <p>What I see, also using the Vue 'tab' in Chrome DevTools is that whenever I click on an item of the list, the "items" array is being correctly updated, but the class is not set on them.</p>
  
  <p>Also, using the time-travel debugging to go through all the mutations, in that case the class is set.</p>
  
  <p>Any idea why this behavior and how to fix it?</p>