title: How to make Vue reactive content update quickly?
body: <p>I have a problem with Vue being sluggish on updating reactive content.</p>
  <p>I want users to select items from a list. When items are selected they should be marked. For test I am just setting a border around the selected items. The problem is when I have multiple items, I feel that Vue takes very long time to update (react) the class on the selected items.</p>
  <p>So I have a simple reactive store which looks as follows:</p>
  <pre class="lang-js prettyprint-override"><code>export default new Vuex.Store({
    state: {
      selections: []
    },
    mutations: {
      set_selections (state, sel) {
        state.selections = sel;
      }
    }
  })
  </code></pre>
  <p>I pass this store to my component which renders a simple list which will contain many items.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;p v-for=&quot;item in items&quot;&gt;
      &lt;span v-bind:class=&quot;{ 'is-selected': isSelected(item) }&quot; v-on:click=&quot;onSelect(item)&quot;&gt;
          {{ item.name }}
      &lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  <p>So each item will have a unique id which I add/remove from my Vuex store state, selections:</p>
  <pre class="lang-js prettyprint-override"><code>onSelect: function(item, event){
      let itemId = item._id;
      let sel = this.selections;
      if (sel.indexOf(itemId) !== -1) {
          var index = sel.indexOf(itemId);
          sel.splice(index, 1);
      } else {
          sel.push(itemId);
      }
      this.$store.commit(&quot;set_selections&quot;, sel);
  },
  </code></pre>
  <p>where,</p>
  <pre class="lang-js prettyprint-override"><code>selections: function() {
      return this.$store.state.selections;
  }
  </code></pre>
  <p>is a computed property which fetches the current selections.</p>
  <p>The method which checks if the item is selected, and thus adds the &quot;is-selected&quot; class to the DOM element, looks as follows:</p>
  <pre class="lang-js prettyprint-override"><code>isSelected: function(item){
      let itemId = item._id;
      let sel = this.selections;
      if (sel.indexOf(itemId) !== -1) {
          return true;
      }
      return false;
  },
  </code></pre>
  <p><strong>Problem</strong>
  When I have many items in my list I feel that the reactive content is very sluggish. When I click on an item it takes about 500ms to 1 sec before the item is marked. (Note I have very many item). Am, I perhaps doing something wrong? Since I loop using , <code>v-for</code>, I understand that Vue must recalculate the <code>isSelected</code> method for every item which might be time consuming.</p>
  <p>Ofcourse I could add/remove the class directly on the onClick event but then I loose the whole point of using Vue. How would you deal with this problem?</p>