[Vue.Draggable] Я хочу перетащить только некоторые столбцы таблицы

Я хочу иметь возможность перетаскивать только некоторые столбцы с помощью этой библиотеки. https://sortablejs.github.io/Vue.Draggable/#/table-column-example

Я хочу создать заголовок с двумя строками и разрешить перетаскивание только некоторых столбцов. Однако сейчас это невозможно.

• Элемент, указанный дескриптором (дескриптор предмета), можно перемещать, но результат не меняется.
• Ошибка выводится в консоль.

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'key' of undefined"

TypeError: Cannot read property 'key' of undefined

• Столбцы, которые нельзя перетаскивать, отображаются, так что их положение можно изменять путем перетаскивания.

Как я могу устранить эти проблемы?

Версия

• vue: ^ 2.6.11
• vuedraggable: ^ 2.24.0
• бутстрап-vue: ^ 2.16.0

Источник Vue

<template>
  <div class="row">
    <div class="col-8">
      <h3>Draggable table</h3>
      <table class="table table-striped">
        <thead class="thead-dark">
          <draggable
            v-model="headers"
            element="tr"
            :options="{ handle: '.item-handle', group:'data-group' }"
            @end="draggableEnd"
          >
            <th>Check</th>
            <th v-for="header in headers" :key="header.key" scope="col" id="data-group">
              <span class="item-handle">::</span>
              {{ header.name }}
            </th>
            <th>End</th>
          </draggable>
          <tr>
            <th>none</th>
            <th v-for="header2 in headersSecond" :key="header2.key" scope="col">
              <input type="text" :name="header2.key" :placeholder="header2.name" />
            </th>
            <th>none</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.name">
            <td>
              <input type="checkbox" />
            </td>
            <td v-for="header in headers" :key="header.key">{{ item[header.key] }}</td>
            <td>END</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "Drag",
  methods: {
    draggableEnd(event) {
      console.log(event);
      this.headers.forEach((data, index) => {
        console.log("index:" + index, data.key, data.name);
      });
    },
  },
  components: {
    draggable,
  },
  data() {
    return {
      headers: [
        { key: "id", name: "ID" },
        { key: "name", name: "NAME" },
        { key: "sport", name: "SPORTS" },
      ],
      headersSecond: [
        { key: "id", name: "ID2" },
        { key: "name", name: "NAME2" },
        { key: "sport", name: "SPORTS2" },
      ],
      list: [
        { id: 1, name: "Abby", sport: "basket" },
        { id: 2, name: "Brooke", sport: "foot" },
        { id: 3, name: "Courtenay", sport: "volley" },
        { id: 4, name: "David", sport: "rugby" },
      ],
      dragging: false,
    };
  },
};
</script>