vuetify Datatable how to filter data without triggering API call each time

Question

I wonder how I can filter my current visible data by clicking on the headers or searching for a word. The problem is if I click on my headers to filter something as desc it also does a new API call to my backend but I only want to filter the visible data. Same problem with my textsearch.

My code:

  <v-card>
    <v-card-title>
      My data
      <v-spacer></v-spacer>
       <v-flex xs2>
      <v-text-field
        append-icon="search"
        label="Search data"
        single-line
        hide-details
        v-model="search"
      ></v-text-field>
      </v-flex>
    </v-card-title>
    <v-data-table
        :headers="headers"
        :items="items"
        :total-items="pagination.totalItems"
        :pagination.sync="pagination"
        :search="search"
        item-key="combo_id"
        :rows-per-page-items="[50, 50]"
        hide-actions
      >
      <template slot="items" slot-scope="props">
        <tr @click="getCombo(props.item.combo_id); props.expanded = !props.expanded">
        <td class="text-xs-left">{{ props.item.data }}</td>
        <td class="text-xs-left">{{ props.item.data2 }}</td>
        <td class="text-xs-left">{{ props.item.data3 }}</td>
        <td class="text-xs-left">{{ props.item.data4 }}</td>
        <td class="text-xs-left">{{ props.item.data5 }}</td>
        <td class="text-xs-left">{{ props.item.data6 }}</td>
        <td class="text-xs-left">{{ props.item.data7 }}</td>
       </tr>
      </template>
      <template slot="expand" slot-scope="props">
        <v-card flat>
          <v-card-text>
            <v-btn color="primary" dark @click.stop="commentDialog = true">Show comments</v-btn> Tags: <strong>{{ comboItemTags }}</strong>
            <v-btn color="warning" class="right" @click.stop="editDialog = true">Edit system</v-btn>
          </v-card-text>
        </v-card>
      </template>
    </v-data-table>
    <div class="text-xs-center pt-2">
      <v-pagination v-model="pagination.page" :length="pages" :total-visible="10"></v-pagination>
    </div>
  </v-card>

    data () {
      return {
      search: '',
      items: [],
      pagination: {
        page: 1,
        rowsPerPage: 50,
        totalItems: 0
      },
...
...
},
watch: {
        pagination: {
            handler() {
                this.getAllSystemsNewPage(this.pagination.page); //Fetch new data and push into items
            },
            deep: true
        }
    },

Answer 1

The problem is that pagination gets modified when you sort/filter items.
The watch handler receives val and oldval as parameter. You could check if the page has changed and only call this.getAllSystemsNewPage in that case.

watch: {
  pagination: {
      handler(newVal, oldVal) {
          if (newVal.page !== oldVal.page) {
            this.getAllSystemsNewPage(newVal.page); //Fetch new data and push into items
          }
      },
      deep: true
  }
}