やりたいこと

下記のサイトでヘッダーが2行のテーブルで並べ替えを行いたい
https://sortablejs.github.io/Vue.Draggable/#/table-column-example

<table border="2px">
  <tbody>
    <tr>
      <th rowspan="2">Check</th>
      <th>:: ヘッダーA</th>
      <th>:: ヘッダーB</th>
      <th>:: ヘッダーC</th>
    </tr>
    <tr>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>データA</td>
      <td>データB</td>
      <td>データC</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>データA</td>
      <td>データB</td>
      <td>データC</td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td>データA</td>
      <td>データB</td>
      <td>データC</td>
    </tr>
  </tbody>
</table>

やってみたこと

下記のような形で作ってみましたが

ヘッダー1行目の横幅が短くなる
ヘッダー2行目が移動してくれない

という事象が起こってしまいます。
これを解消する方法は無いでしょうか？

HTML

<table class="table table-striped">
  <thead class="thead-dark">
    <tr>
      <th rowspan="2">Check</th>
      <draggable v-model="headers" :options="{ handle: '.item-handle' }">
        <th v-for="header in headers" :key="header.key" scope="col">
          <span class="item-handle">::</span>
          {{ header.name }}
        </th>
      </draggable>
    </tr>
    <tr>
      <th v-for="header2 in headersSecond" :key="header2.key">
        <input
          type="text"
          :name="header2.key"
          :placeholder="header2.name"
        />
      </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>
    </tr>
  </tbody>
</table>

データ

data() {
  return {
    headers: [
      { key: "id", name: "ID" },
      { key: "name", name: "NAME" },
      { key: "sport", name: "SPORTS" },
    ],
    headersSecond: [
      { key: "id", name: "ID" },
      { key: "name", name: "NAME" },
      { key: "sport", name: "SPORTS" },
    ],
    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,
  };
},