[vue]動的にテーブルを表示する方法

Question

やりたいこと

下記のライブラリを使ってテーブルのドラッグをしたい。
https://sortablejs.github.io/Vue.Draggable/#/table-column-example

ただし、データは日本語で表示したいです。

ためしたこと

Headersの内容を日本語にすると中身が出てこないです。
IDが一致したらそれに紐づく内容を出せれば良いかと思って下記のように作りましたが、これから先をどうすれば良いかわかりません。
どうやったらうまく表として完成するでしょうか？

<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" tag="tr">
            <th v-for="header in headers" :key="header.id" scope="col">
              {{ header.name }}
            </th>
          </draggable>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="`list-${item.id}`">
            <td v-for="header in headers" :key="`header-${header.id}`">
              <!-- ここがおかしい -->
              {{ item }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "Drag",
  methods: {},
  components: {
    draggable,
  },
  data() {
    return {
      headers: [
        { id: 1, name: "ID" },
        { id: 2, name: "名前" },
        { id: 3, name: "メーカー" },
        { id: 4, name: "価格" },
      ],
      list: [
        { id: 1, name: "Abby", maker: "AAA", price: 1500 },
        { id: 2, name: "Brooke", maker: "BBB", price: 200 },
        { id: 3, name: "Courtenay", maker: "CCC", price: 500 },
        { id: 4, name: "David", maker: "DDD", price: 60000 },
      ],
      dragging: false,
    };
  },
};
</script>

Answer 1

こうすることで解決できました

<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" tag="tr">
            <th v-for="header in headers" :key="header.key" scope="col">{{ header.name }}</th>
          </draggable>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.name">
            <td v-for="header in headers" :key="header.key">{{ item[header.key] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "Drag",
  methods: {},
  components: {
    draggable,
  },
  data() {
    return {
      headers: [
        { key: "id", name: "ID" },
        { key: "name", name: "名前" },
        { key: "sport", name: "スポーツ" },
      ],
      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>