Vue Bootstrap B-Table initizalization

<template>
    <div>

        <b-table ref="myTable" :items="myProvider" :fields="fields" api-url="/contact/" show-empty striped hover responsive>
            <!-- .... -->
        </b-table>

        <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>

    </div>
</template>
<script>
import { BTable, BPagination, BModal, ModalPlugin } from 'bootstrap-vue';

Vue.use(ModalPlugin);

export default{
    components:{
        'b-table': BTable,
        'b-pagination': BPagination,
        'b-modal': BModal,
    },
    data(){
        return {
            currentPage: 1,
            totalRows: null,
            perPage: 15,
            fields: [
                { key: 'column1', label: 'Column1' },
                { key: 'actions', label: 'Actions', sortable: false, class: 'w-25'  }
            ],
        }
    },
    methods:{
        async myProvider(ctx) {
            let items = []

            ctx.perPage = this.perPage;
            ctx.page = this.currentPage;

            ctx.filter = {param1: true} // in case you need filters

            try {
                const response = await axios.get( ctx.apiUrl, {params: ctx}); // Fetch data from the specified endpoint
                items = response.data.data;

                this.totalRows = response.data.total;

            } catch (error) {
                console.error('Error fetching change requests:', error);
            }

            return items;
        },
    },
    watch:{
        currentPage(){
            this.$refs.myTable.refresh()
        },
    }
}
</script>