title: Vue v-for performance is poor
body: <p>I have about 4000 objects being returned via AJAX. I'm looping over them with v-for and spitting them out into a table.</p>
  
  <p>The initial load and render is very fast but I've also got an input field I'm using for 'instant search'. I use a computed property to filter the dataset using the input value and on a small dataset, say up to about 100 results this works superbly but as the dataset gets larger it gets a lot slower.</p>
  
  <p>I'm rendering a table with 4 values, one of which is a custom Component. Removing the Component speeds things up but I'm surprised that it's this bad a performance hit. I'm not sure if there's something I'm missing or if someone could point me in the right direction? </p>
  
  <p>I know its a large amount of data for one page but I thought this was what Vue was supposed to be good at. I googled the issue and for instance I found this <a href="http://codepen.io/anon/pen/JNLKgR" rel="noreferrer">codepen</a> rendering a similar list of items and filtering in exactly the same way and I could copy-paste the number of items in the array all the way up to 10,000 or so and there was no perceptible performance hit when searching.</p>
  
  <p>Steps I've taken to speed things up, these have made either tiny or no improvements:</p>
  
  <ul>
  <li>Added a v-bind:key with a unique value on the v-for </li>
  <li>Not using the table element and instead using div or ul</li>
  <li>Forgoing the nativeJS .filter method because it can be slow, and using my own filter
  method. </li>
  <li>Trying running it on a fresh codebase with only the    dependencies
  that are needed to run.</li>
  <li>And I am aware of pagination    techniques etc. but I'm unwilling to
  do that unless I've exhausted    all other possibilities.</li>
  </ul>
  
  <p>Thanks</p>
  
  <p>It wants me to paste code here, even though I've linked to codepen so here's the JS without the items array.</p>
  
  <pre><code>    Vue.component('my-component', {
    template: '#generic-picker',
    props:['items','query','selected'],
    created: function(){
      this.query='';
      this.selected='';
    },
    computed:{
      filteredItems: function () {
        var query = this.query;
        return this.items.filter(function (item) {
          return item.toLowerCase().indexOf(query.toLowerCase()) !== -1})
      }
    },
    methods:{
      select:function(selection){
        this.selected = selection;
      }
    }
  })
  // create a root instance
  var genericpicker = new Vue({
    el: '#example'
  });
  </code></pre>