title: Why is BootstrapVue not displaying the selected checkboxes inside my table when changing pages?
body: <p>I have included checkboxes inside my <code>b-table</code> for certain columns by doing the following:</p>
  <pre><code>&lt;template #cell()=&quot;data&quot;&gt;
      &lt;b-form-checkbox v-model=&quot;data.checkbox&quot; @change=&quot;clickedCheckbox(data)&quot;&gt;&lt;/b-form-checkbox&gt;
  &lt;/template&gt;
  </code></pre>
  <p>The code for when a checkbox is clicked:</p>
  <pre><code>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 &lt; this.checkmarkedBoxes.length; i += 1) {
        if (this.checkmarkedBoxes[i].item.name === data.item.name) {
          this.checkmarkedBoxes.splice(i, 1);
          break;
        }
      }
    }
  }
  </code></pre>
  <p>I understand with BootstrapVue there are known limitations for the <code>b-table</code> when combining it with pagination, which is why I used <code>this.$set</code> 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 <code>checkmarkedBoxes</code> array still has the previously selected checkboxes, so I don't know why even after using <code>this.$set</code> it still does not maintain the selections. Does anybody know how to fix this?</p>