I have included checkboxes inside my b-table for certain columns by doing the following:

<template #cell()="data">
    <b-form-checkbox v-model="data.checkbox" @change="clickedCheckbox(data)"></b-form-checkbox>
</template>

The code for when a checkbox is clicked:

clickedCheckbox(data) {
  if (data.checkbox) {
    this.$set(data, 'checkbox', true);
    this.checkmarkedBoxes.push(data);
  } else {
    this.$set(data, 'checkbox', false);
    for (let i = 0; i < this.checkmarkedBoxes.length; i += 1) {
      if (this.checkmarkedBoxes[i].item.name === data.item.name) {
        this.checkmarkedBoxes.splice(i, 1);
        break;
      }
    }
  }
}

I understand with BootstrapVue there are known limitations for the b-table when combining it with pagination, which is why I used this.$set to maintain the selected checkboxes. However, it's not working. For example, let's say I click a few checkboxes on page 1 of my table, go to page 2, then go back to page 1, the checkboxes that were selected are no longer selected. The checkmarkedBoxes array still has the previously selected checkboxes, so I don't know why even after using this.$set it still does not maintain the selections. Does anybody know how to fix this?