GraphQL vuetify datatable

Datatable.vue

<template>
  <v-row>
    <v-col xs="12">
      <v-data-table
        :headers="headers"
        :items="ingredients.edges.map((v) => v.node)"
        :loading="this.$apollo.queries.ingredients.loading"
        :server-items-length="ingredients.totalCount"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        :page.sync="page"
        :items-per-page="5"
        dense
        must-sort
        class="elevation-1"
      ></v-data-table>
    </v-col>
  </v-row>
</template>

<script>
import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'
import gql from 'graphql-tag'

export default {
  components: {
    Logo,
    VuetifyLogo
  },
  data() {
    return {
      after: '',
      before: '',
      page: 1,
      name: 'Text',
      sortBy: 'name',
      sortDesc: false,
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Category', value: 'category.name' },
      ],
      ingredients: {
        edges: [],
      },
    }
  },
  computed: {
    orderBy() {
      if (this.sortDesc) {
        return `-${this.sortBy.toLowerCase()}`
      }
      return this.sortBy.toLowerCase()
    }
  },
  watch: {
    page(current, old) {
      if (current > old) {
        this.before = ''
        this.after = this.ingredients.pageInfo.endCursor
      } else {
        this.after = ''
        this.before = this.ingredients.pageInfo.startCursor
      }
      this.$apollo.queries.ingredients.refetch()
    }
  },
  apollo: {
    ingredients: {
      query: gql`
        query ($orderBy: String!, $after: String!, $before: String!) {
          ingredients(orderBy: $orderBy, after: $after, before: $before, first: 5) {
            totalCount
            pageInfo {
              startCursor
              endCursor
            }
            edges {
              cursor
              node {
                name
                category {
                  name
                }
              }
            }
          }
        }`,
      variables() {
        return {
          orderBy: this.orderBy,
          after: this.after,
          before: this.before
        }
      }
    },
  },
  created() {
    this.$watch(vm => [vm.sortBy, vm.sortDesc].join(), val => {
      this.$apollo.queries.ingredients.refetch()
    })
  },
}
</script>