'pagination' has been removed, use 'options' instead vuetify

Question

<template>
  <div>
    <v-data-table
                  :items="agents"
                  hide-default-footer
                  class="agent-table"
                  v-bind:pagination.sync="pagination">
                  <template slot="item" slot-scope="props">
                    <tr>
                      <td>{{ props.item.first_name }} {{ props.item.last_name }}</td>
                      <td>{{ props.item.email }}</td>
                      <td>{{ props.item.phone }}</td>
                    </tr>
                 </template>
     </v-data-table>
    <div >
       <v-pagination v-model="pagination.page" :length="pages" :total-visible="7"></v-pagination>
    </div>
  </div>
<template>

<script>


  export default {
    data: function() {
      return {
        pagination: {
          rowsPerPage: 15,
          page: 1
        },
        agents:[]
      }
    },
    computed: {
      pages () {
        return this.pagination.rowsPerPage && this.agents.length !== 0 ? Math.ceil(this.agents.length / this.pagination.rowsPerPage) : 0
      },
    },
    created() {
     this.fetchAgents();
    }
    methods: {
     fetchAgentss() {
     var that = this;
     this.$axios.get('agents.json')
     .then(response => {
      that.agents = response.data.agents;
     });
    }
   }
  }   
</script>

I am upgrading from vuetify version 1.0.5 to 2.3.10 and I am using v-pagination for custom pagination but I am getting this error [breaking] 'pagination' has been removed, use 'options' instead

Please help me find where I am going wrong

Answer 1

Instead of using v-bind:pagination.sync use v-bind:options.sync

{
   page: number,
   itemsPerPage: number,
   sortBy: string[],
   sortDesc: boolean[],
   groupBy: string[],
   groupDesc: boolean[],
   multiSort: boolean,
   mustSort: boolean
}

Refer Official API

For Example