title: vue-table-2 with Vuex - not able to change the count property
body: <p>I'm using the vue-table-2 component : <a href="https://github.com/matfish2/vue-tables-2" rel="nofollow noreferrer">https://github.com/matfish2/vue-tables-2</a> and I'm struggling to make it work as I want. </p>
  
  <p>I have an API (using API Platform) which is already making all the pagination works. So when I fetch for the first time my list of companies it gives the first ten results + the total rows. I store all of this in my vuex store and I am able to display the list in my table (with useVuex false or true so I don't really understand how this parameter works). The issue is I cannot paginate because I only got ten results and can't get the total rows count to change so I do not get the pagination element at the bottom and can't bind something to it to fetch the other pages later.</p>
  
  <p>Since I'm pretty new to VueJs I can't figure out how this should work with my API. Here is my code so far:</p>
  
  <p>My DataTable element :</p>
  
  <pre><code>&lt;v-client-table name="company" :columns="columns" :data="companies" :options="options" :theme="theme" id="dataTable"&gt;
            &lt;b-button slot="actions" slot-scope="props" variant="secondary" size="sm" class="btn-pill"&gt;Edit&lt;/b-button&gt;
  &lt;/v-client-table&gt;
  </code></pre>
  
  <p>And my script : </p>
  
  <pre><code>&lt;script&gt;
  import Vue from 'vue'
  import { ClientTable, Event } from 'vue-tables-2'
  import { mapGetters } from 'vuex'
  
  Vue.use(ClientTable)
  
  export default {
    name: 'DataTable',
    components: {
      ClientTable,
      Event,
    },
    data: function() {
      return {
        columns: ['name', 'actions'],
        options: {
          headings: {
            name: 'Name',
            actions: 'Actions',
          },
          sortable: ['name'],
          filterable: ['name'],
          sortIcon: {
            base: 'fa',
            up: 'fa-sort-asc',
            down: 'fa-sort-desc',
            is: 'fa-sort',
          },
          pagination: {
            chunk: 5,
            edge: false,
            nav: 'scroll',
          },
        },
        useVuex: true,
        theme: 'bootstrap4',
        template: 'default',
      }
    },
    computed: {
      ...mapGetters({
        companies: 'companyModule/companies',
        totalCompanies: 'companyModule/totalCompanies',
      }),
    },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is in my component loading the data where I specify how many items per page I want my api to send me and the page I want: </p>
  
  <pre><code>created() {
      this.$store.dispatch('companyModule/FETCH_COMPANIES', {
        page: 1,
        nbItemPerPage: 10,
      })
    },
  </code></pre>
  
  <p>My store looks like this:</p>
  
  <pre><code>import ApiService from '@/services/APIService'
  
  export const companyModule = {
    strict: true,
    namespaced: true,
    state: {
      companies: [],
      totalCompanies: 0,
    },
    getters: {
      companies: state =&gt; state.companies,
      totalCompanies: state =&gt; state.totalCompanies,
    },
    mutations: {
      SET_COMPANIES(state, data) {
        state.companies = data.companies
        state.totalCompanies = data.totalCompanies
      },
    },
    actions: {
      FETCH_COMPANIES(context, payload) {
        payload.entity = 'companies'
        return ApiService.get(payload).then(data =&gt; {
          context.commit('SET_COMPANIES', data)
        })
      },
    },
  }
  </code></pre>
  
  <p>When I received my data, I stored everything in my companies state and for now I'm storing everything I'm getting from my API and this looks like this :</p>
  
  <pre><code>{
        "@id": "/api/admin/companies/1",
        "@type": "Company",
        "id": 1,
        "name": "Test Company",
  } 
  </code></pre>
  
  <p>Thanks in advance for your help ! </p>