bootstrap-vue issues with checkboxes in b-table

Question

I'm having an issue getting the checkboxes to work correctly. The checkboxes that are being rendered for each row in the "selected" slot are not binding to the correct row. When you click the checkbox, it sets the top rows' checkbox to true/false position.

Questions: 1) How to bind the true/false state of the checkbox for the row to it's row item? I'm trying to bind it to data.item.selected and then loop through the data to find the "selected" objects and perform the necessary action. I even tried adding the row object to a new data array, but it only adds the top row?

2) What would be the best way to turn all of the row checkbox's true/false based on the HEAD_selected slot checkbox?

Code:

<b-table 
  striped 
  hover 
  outlined 
  :items="schools" 
  :fields="fields"
  :per-page="perPage"
  :current-page="currentPage"
  :total-rows="totalRows"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc">

  <template slot="HEAD_selected" slot-scope="data">
    <b-form-checkbox @click.native.stop v-model="allSelected">
    </b-form-checkbox>
  </template>

  //Not working. data.item.selected is always the top row in all of the results, not it's current position
  <template slot="selected" slot-scope="data">
    <b-form-checkbox id="checkbox" @click.stop v-model="data.item.selected">
    </b-form-checkbox>
  </template>

</b-table>

Answer 1

Answer:

The issue was the id in the b-form-checkbox. id="checkbox" was binding to the same checkbox. Once I changed it to :id="'checkbox'+data.index" it worked!