I'm using b-pagination on a project and my buttons don't work - bootstrap-vue

Question

I'm working with VueJS and bootstrapVue and used the code available on bootsrapVue documentation and on the examples there everything seems to work fine but when i click in any button of the b-pagination nothing works, i can't change the current page using the previous/next buttons or the number buttons. My code is this:
<template>
<div class="overflow-auto">
<b-pagination
pills
align="fill"
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<b-table
id="my-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
</template>
<script>
// # is an alias to /src
//import Navbar from "#/components/Navbar.vue";
export default {
name: "About",
components: {
//Navbar,
},
data() {
return {
perPage: 3,
currentPage: 1,
items: [
{ id: 1, first_name: 'Fred', last_name: 'Flintstone' },
{ id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
{ id: 3, first_name: 'Barney', last_name: 'Rubble' },
{ id: 4, first_name: 'Betty', last_name: 'Rubble' },
{ id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
{ id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
{ id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
{ id: 8, first_name: 'Rockhead', last_name: 'Slate' },
{ id: 9, first_name: 'Pearl', last_name: 'Slaghoople' },
{ id: 10, first_name: 'The Great', last_name: 'Gazzoo' },
{ id: 11, first_name: 'Rockhead', last_name: 'Slate' },
{ id: 12, first_name: 'Pearl', last_name: 'Slaghoople' },
{ id: 13, first_name: 'The Great', last_name: 'Gazzoo' },
{ id: 14, first_name: 'Rockhead', last_name: 'Slate' },
{ id: 15, first_name: 'Pearl', last_name: 'Slaghoople' },
],
}
},
computed: {
rows() {
return this.items.length
}
}
};
</script>