Pagination doesn't work for me with b-table - vue.js

Question

I'm building an app using VueJS with bootstrapVue for frontend and Django for backend. I'm using b-table and I would like to use pagination by b-pagination.
In my itemsProvider function I get the current page of the b-pagination like this ctx.currentPage and send a request to the back-end. The problem is that when I clicked on the buttons of the b-pagination the itemsProvider function isn't recalled, and I don't know why.
Below is a portion of code:
<template>
<div class="container">
<b-pagination v-model="currentPage" :totalRows="totalRows" :per-page="perPage"></b-pagination>
<p>Current page {{currentPage}}</p>
<b-table
current-page="currentPage"
per-page="perPage"
:items="itemsProvider"
:fields="fields"
>
</b-table>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "Archive",
data() {
return {
perPage: 10,
totalRows: 200,
pageOptions: [5, 10, 22],
currentPage: 1,
bookInfo: {},
fields: [...]
};
},
computed: {
books() {
return this.$store.getters["books/books"].filter(item => {
return item.status == "AR";
});
}
},
methods: {
...mapActions({
getArchivedBooks: "books/getArchivedBooks"
}),
itemsProvider(ctx, callback) {
console.log(ctx.currentPage)
let page = ctx.currentPage;
return this.getArchivedBooks(page).then(() => {
const items = this.books;
return items || [];
});
},
}
};
</script>

Answer 1

I should bind the perPage and currentPage values to b-table's props current-page and per-page like this:
<b-table
:current-page="currentPage"
:per-page="perPage"
:items="itemsProvider"
:fields="fields"
>
</b-table>