title: Vue + Vuetify performance
body: <p>So I have a Vuetify data table with a lot of items, I need to display <code>50/100/150</code> items.</p>
  
  <p>The problem, when I have 50 items it takes about 2 to 3 seconds to load the entire table. My request takes about 500ms to load and vue takes 3 seconds to render. When I have 150 items it takes about 10 seconds.</p>
  
  <p>Is it possible to reduce render time to at least 5 seconds with 150 items?</p>
  
  <p>I'm using this table: <a href="https://vuetifyjs.com/en/components/data-tables#data-tables" rel="nofollow noreferrer">https://vuetifyjs.com/en/components/data-tables#data-tables</a></p>
  
  <p>My table code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
      :items-per-page="50"
      :footer-props="rowsPerPageItems"
    &gt;
      &lt;TableRow :row="item" v-for="item in clientList" :key="item.id"&gt;
    &lt;/v-data-table&gt;
  &lt;/template&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// my clientList is async response from server
  import { mapGetters } from "vuex";
  export default {
    data(){
      return {
        rowsPerPageItems: [50, 100, 150]
      }
    },
    computed: {
      ...mapGetters["clientList"] // this comes from vuex, I don't think it's relevant. It returns about 400 client info
    }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- My component TableRow --&gt;
  &lt;template&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;v-checkbox v-model="row.checked" color="primary"&gt;&lt;/v-checkbox&gt;
      &lt;/td&gt;
      &lt;td&gt;{{ row.data }}&lt;/td&gt;
      &lt;td&gt;{{ row.name }}&lt;/td&gt;
      &lt;td&gt;
      &lt;!-- This is a jQuery plugin, I need it to keep track of every key pressed --&gt;
        &lt;Select2
          :id="row.id.toString()"
          :settings="{ minimumInputLength: 3, ajax: ajaxData, placeholder: labels.descriptionList[row.description] }"
          @select="handleSelect2($event)"
        /&gt;
      &lt;/td&gt;
      &lt;td v-if="this.is_expense"&gt;
        &lt;v-select
          :items="labels.categoryName"
          :placeholder="labels.categoryList[row.category]"
          @input="updateCashflow"
          v-model="row.category"
          dense
        &gt;&lt;/v-select&gt;
      &lt;/td&gt;
      &lt;td v-else&gt;&lt;/td&gt;
      &lt;td&gt;{{ row.amount }}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>