title: Sluggish render VueJS page with 2000-3000 items
body: <p>I have an administrator view which can display a list of users. Complete list is about 3000 entries. I have pagination enabled by default to 100 users/page, but the admin has the option to display all of them at once.
  When 100 users are displayed, everything is fine, but when all 3k are displayed the page becomes sluggish (e.g. if i try to sort a column, it'll take 3-4 seconds to sort them) and I understand there's not much I can do about the response time. I'm using <code>lodash OrderBy</code> method for sorting.</p>
  
  <p><strong>My question is</strong>, is there a way to have VueJS rendering the list asynchronously, so if I click sort by Name, then immediately sort by Level, it will cancel the existing sorting operation and start a new one?</p>
  
  <p>Here's a sample code (it doesn't work obviously, i just made it up to illustrate my point):</p>
  
  <pre class="lang-HTML prettyprint-override"><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-3" @click="setSort('name')"&gt;
                  Name
              &lt;/div&gt;
              &lt;div class="col-3" @click="setSort('level')"&gt;
                  Level
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row" v-for="u in sortedUsers"&gt;
              &lt;div class="col-3"&gt;
                  {{u.name}}
              &lt;/div&gt;
              &lt;div class="col-3"&gt;
                  {{u.level}}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data: () =&gt; ({
              users: []
              ,orderCol:'name'
              ,orderDir:'asc'
          })
          ,computed : {
              sortedUsers () {
                  return _.orderBy(this.users,this.orderCol,this.orderDir);
              }
          }
          ,methods : {
              setSort(col){
                  this.orderCol = col;
                  this.orderDir = (this.orderDir=='asc') ? 'desc' : 'asc';
              }
          }
          ,mounted () {
              this.$post('/getusers')
              .then((data) =&gt; {//assume data is in this format:
                  // [{'name':'test1', 'level':'admin'}, {'name':'test2','level':'user'}, and so on]
                  this.users = data; 
              });
          }
      };
  &lt;/script&gt;
  </code></pre>