我想在BootstrapVue表上实现拖放功能。通过使用下面的代码，我只能拖放表头，但表项不会更改。我控制台记录了未定义的updatedHeaders。table screenshot

<template>
  <div class="container mt-5">
    <div class="row">
      <h3>Managing Existing Accounts</h3>
    </div>
    <div class="row mt-3">
      This section shows all accounts you currently manage.<br>
      Click on a row to open up details about that account.<br>
      Accounts that have expired will have all their personally identifiable information scrubbed in 90 days.
    </div>

    <!--toggle for column customization-->
    <div>
      <b-button v-b-toggle.column-collapse variant="primary">Column</b-button>
      <b-collapse id="column-collapse" class="mt-2">
        <b-card>
          <p class="card-text">Choose the column</p>
          <b-form-checkbox-group v-model="selectedColumns">
            <b-form-checkbox value="Renew Date">Renew Date</b-form-checkbox>
            <b-form-checkbox value="Account Name">Account Name</b-form-checkbox>
            <b-form-checkbox value="Location">Location</b-form-checkbox>
            <b-form-checkbox value="Type">Type</b-form-checkbox>
            <b-form-checkbox value="Account Type">Account Type</b-form-checkbox>
          </b-form-checkbox-group>
        </b-card>
      </b-collapse>

      <div>
        <table class="table table-striped">
          <thead class="thead-dark">
          <draggable v-model="updatedHeaders" tag="tr" @end="dragged">
            <th v-for="header in headers" :key="header" scope="col">
              {{ header }}
            </th>
          </draggable>
          </thead>
          <tbody>
          <tr v-model="updatedHeaders" v-for="item in items" :key="item.gymID">
            <td v-for="header in headers" :key="header">{{ item[header] }}</td>
          </tr>
          </tbody>
        </table>

      </div>
      <rawDisplayer class="col-2" :value="items" title="Items"/>

      <rawDisplayer class="col-2" :value="updatedHeaders" title="Headers"/>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      dataLoaded: false,
      accountList: [],
      items: [],
      selectedColumns: ['Renew Date', 'Account Name', 'Location', 'Type', 'Account Type'],
      _xsrf: "",
    };
  },
  created() {
    // Load the saved column order from local storage
    const headers = localStorage.getItem('tableHeaders');

    if (headers !== "undefined") {
      const selectedFields = JSON.parse(headers);
      this.selectedColumns = selectedFields.map(field => field.label);
    }

    fetch('/distributor/api/managing-existing-accounts')
        .then(response => response.json())
        .then(data => {
          this.accountList = data.accountList;
          this.items = data.accountList;
          this.dataLoaded = true;
          this._xsrf = data._xsrf;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
  },
  computed: {
    filteredFields() {
      if (this.dataLoaded) {
        return Object.keys(this.items[0] ? this.items[0] : {})
            .filter(field => this.selectedColumns.includes(field))
            .map(field => ({
              key: field,
              label: field
            }));
      }
    },
    headers() {
      console.log(this.updatedHeaders);
      return this.updatedHeaders ? this.updatedHeaders : this.filteredFields?.map(field => field.key);
    },
  },

  methods: {
    dragged() {
      // Map the new order of headers to their corresponding labels
      const updatedLabels = this.updatedHeaders?.map(header => this.filteredFields.find(field => field.key === header).label);
      // Save the new order of headers to local storage
      localStorage.setItem('tableHeaders', JSON.stringify(this.headers));
    }
  }
}
</script>

<style>
/* Add your styles here */
</style>

我想有复选框来选择我想显示的列，我可以拖放表列。