I have the following b-table and b-pagination in my template:

<b-table
  bordered
  hover
  responsive
  :items="items"
  :fields="fields"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
  sort-icon-left
  :filter="searchFilter"
  @filtered="onFiltered"
  :filter-included-fields="filterOn"
  :per-page="perPage"
  :current-page="currentPage"
  class="table1"
  ref="table1"
  selectable
  @row-selected="selectedRow"
  :tbody-tr-class="styleRow"
>
  <template #cell(selected)="{ rowSelected }">
      <template v-if="rowSelected">
          <span class="sr-only">Selected</span>
      </template>
      <template v-else>
          <span class="sr-only">Not selected</span>
      </template>
  </template>
</b-table>

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

In my Vue app, I have the following functions for when the user selects a row:

export default {
  data() {
    return {
      items: [],
      sortBy: 'build',
      sortDesc: true,
      searchFilter: '',
      perPage: 11,
      currentPage: 10,
      totalRows: 1,
      fields: [],
      defaultFields: [],
      fieldNames: [],
      filterOn: [],
      selectedInfo: { item: {}, value: {}, field: {} },
      selected: [],
    };
  },
  methods: {
    styleRow(item) {
      if (item.selected) {
        return ['b-table-row-selected', 'table-secondary'];
      }
      return [];
    },
    selectedRow(items) {
      this.selected = items;
    }
  },
};

Here's the problem: let's say the user selects a few rows on page 1 of the table, then goes to page 2, and then goes back to page 1. The previously clicked rows are no longer selected. How do I fix this? How do I prevent pagination from resetting the selected rows?