Pagination issue with BootstrapVuew

ContractList.vue

<template>

<div>

  <p class="alert alert-info"><i class="fa fa-info-circle"></i> Click on the contract for more detail.</p>

  <b-table striped hover :items="contracts.data" :fields="fields" 
    :sort-by="sortBy" :sort-desc="sortDesc" no-local-sorting @sort-changed="sortChanged" />

  <b-pagination :total-rows="contracts.total" :per-page="contracts.per_page" 
    :limit="6" v-model="contracts.current_page"  @change="paginationChange" />

</div>

</template>

<script>
  export default {
    data () {
      return {
        contracts: [],
        fields: [
          { key: 'ref', sortable: true },
          { key: 'contractName' },
          { key: 'contractValue', sortable: true }
        ],
        sortBy: 'ref',
        sortDesc: true ,
        page: 1
      }
    },
    created () {
      this.loadData();
    },
    methods: {
      loadData () {
        axios.get('/api/finance/contractlist', {
          params: {
            fields: this.fields.map(field => field.key),
            sortBy: this.sortBy,
            sortDesc: this.sortDesc,
            page: this.page
          }
        })
        .then(response => {
          this.contracts = response.data;
        })
        .catch(error => {
          console.error(error);
          this.contracts = [];
        });
      },
      sortChanged (ctx) {
        this.sortBy = ctx.sortBy;
        this.sortDesc = ctx.sortDesc;
        this.loadData();
      },
      paginationChange (page) {
        this.page = page;
        this.loadData();
      }
    }
  }
</script>