Pagination doesn't work

Hello, i trying to paginate my bootstrap-vue Datatable, but some how the pagintion doesn't work. After looking well it seems that my array items [] is the problem and the this why the pagination stay to page 1.

Her is the full code :

<b-pagination
                        v-model="currentPage"
                        :total-rows="totalRows"
                        :per-page="perPage"
                        align="fill"
                        size="sm"
                      ></b-pagination>
<b-table
                      :striped="striped"
                      :bordered="bordered"
                      :borderless="borderless"
                      :outlined="outlined"
                      :sort-by.sync="sortBy"
                      :sort-desc.sync="sortDesc"
                      :current-page="currentPage"
                      :per-page="perPage"
                      :filter="filter"
                      :small="small"
                      :hover="hover"
                      :dark="dark"
                      :fixed="fixed"
                      :foot-clone="footClone"
                      :no-border-collapse="noCollapse"
                      :items="items"
                      :fields="fields"
                      :head-variant="headVariant"
                      :table-variant="tableVariant"
                    >
                      <template #cell(image)="row">
                        <div>
                          <b-img
                            v-on:click="info(row.item, row.index, $event.target)"
                            v-bind="mainProps"
                            center
                            :src="'/uploads/produits/' + fields.image"
                            alt="Center image"
                          ></b-img>
                        </div>
                      </template>
                      <template #cell(edit)="row">
                        <button
                          class="btn btn-sm btn-outline-info"
                          v-on:click="info(row.item, row.index, $event.target)"
                        >
                          <i class="fas fa-pen"></i>
                        </button>
                      </template>
                      <template #cell(delete)="row">
                        <button
                          class="btn btn-sm btn-outline-danger"
                          v-on:click="info(row.item, row.index, $event.target)"
                        >
                          <i class="fas fa-trash"></i>
                        </button>
                      </template>
                    </b-table>

<script>
import Vue from "vue";
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";

// Install BootstrapVue
Vue.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);

export default {
  data() {
    return {
      filter: "",
      fields: [
        { key: "image", label: "" },
        { key: "nom", label: "Nom", sortable: true },
        {
          key: "description",
          label: "Description",
          sortable: true,
          sortDirection: "desc",
        },
        { key: "prix", label: "Prix", sortable: true },
        { key: "edit", label: "" },
        { key: "delete", label: "" },
      ],
      items: [],
      mainProps: {
          width: 55,
          height: 55,
          class: 'my-5'
        },
      tableVariants: [
        "primary",
        "secondary",
        "info",
        "danger",
        "warning",
        "success",
        "light",
        "dark",
      ],
      striped: false,
      bordered: false,
      borderless: false,
      outlined: false,
      small: false,
      hover: false,
      dark: false,
      fixed: false,
      footClone: false,
      headVariant: null,
      tableVariant: "",
      noCollapse: false,
      totalRows: 1,
      currentPage: 1,
      perPage: 5,
      pageOptions: [5, 10, 15, 25, 100, { value: 1000, text: "Tout" }],
      sortBy: "",
      sortDesc: false,
      sortDirection: "asc",
      filterOn: [],
    };
  },
  computed: {
    sortOptions() {
      // Create an options list from our fields
      return this.fields
        .filter((f) => f.sortable)
        .map((f) => {
          return { text: f.label, value: f.key };
        });
    },
  },
  mounted() {
    // Set the initial number of items
    this.totalRows = this.items.length;
  },
  methods: {
    getProduits: function () {
      axios.get("/api/listproduits").then(
        function (response) {
          this.items = response.data.data;
        }.bind(this)
      );
    },
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
  },
  created: function () {
    this.getProduits();
  },
  mounted() {
    // Set the initial number of items
    this.totalRows = this.items.length;
  },
};
</script>

How can i solve this problem. Thank you in advance for the help.