title: Performance of Vue with a large array of objects
body: <p>I have a long list of items (460 in total) stored in <code>harvesters</code>. Here is my code in <code>Vue</code> to filter the list:</p>
  
  <pre class="lang-js prettyprint-override"><code>computed: {
      searchHarvesters() {
        var vm = this;
        let searchTerm =this.searchInHarvesters.toLowerCase();
  
        let collection_filters = {};
        let col_filt_enabled = false;
        this.distinct_collections.forEach(c =&gt; {
          if(c.selected) {
            collection_filters[c.name]=true;
            col_filt_enabled =true;
          }
        });
  
        return this.harvesters.filter(h =&gt; {
  
          let validSearch = (h.name.toLowerCase().includes(searchTerm) ||
            h.db_collection_name.toLowerCase().includes(searchTerm) ||
            h.source_name.toLowerCase().includes(searchTerm));
          return (
            col_filt_enabled ? 
            (typeof(collection_filters[h.db_collection_name])!== "undefined"  &amp;&amp;  validSearch):
            validSearch
          );
  
        });
      }
    }, 
  
  ...
  methods:{
      debounceInput: _.debounce(function (e) {
        this.searchInHarvesters = e.target.value;
      }, 500)
    },
  ...
  
  </code></pre>
  
  <p>Here is the HTML element:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form class="uk-search uk-search-default uk-float-right"&gt;
    &lt;span class="uk-search-icon-flip" uk-search-icon&gt;&lt;/span&gt;
    &lt;input class="uk-input" type="search" placeholder="Search..." v-on:input="debounceInput"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I put a term to the input to filter the list, it works fine; however, when I clear the input, it gets like 5s to display the full list, which is quite slow.
  How can I make Vue work faster?
  Thanks.</p>