I'm trying to get vuetify's pagination component to work with the nuxtjs@apollo module.

But I'm having a hard time getting it to work with my vuex store.

I'll skip over most of the code as its a lot of boilerplate.

First of all in order to populate my initial state I send a graphql query to my back end and commit these to my state.

const client = context.app.apolloProvider.defaultClient

const response = await client.query({
  query: productsGQL,
  variables: {
    first: 5,
    page: 1
  }
})

commit('setProducts', response.data.products.data)
commit('setPagination', response.data.products.paginatorInfo)
commit('setPage', response.data.products.paginatorInfo.currentPage)

this works fine, products, pagination and page are all set with initial data.

Now, I have 2 components a CardComponent that contains all of the products like so

<script>
export default {
  name: 'CardComponent',

  computed: {
    products() {
      return this.$store.getters.getProducts
    }
  }
}
</script>

And a PaginationComponent:

<template>
  <div>
    <v-pagination
      v-model='page'
      circle
      :length='total_pages'
    />
  </div>
</template>

<script>
export default {
  name: 'PaginationComponent',

  data() {
    return {
      total_pages: Math.ceil(this.$store.getters.getPagination.total / this.$store.getters.getPagination.perPage)
    }
  },

  computed: {
    page: {
      get() {
        return this.$store.getters.getPage
      },
      set(value) {
        return this.$store.commit('setPage', value)
      }
    }
  }
}
</script>

Page Initial value is 1, when I click on the second page the Page variable is updated to 2, this is also than reflected in my state.

The thing I'm unsure about is: how do I requery the database? the page is being updated but the products displayed are still the same, and I'm not sure how to go about this.

If you some more code from the store I'll show it here.