Vue.js Vue：在表格中显示嵌套数据

我正在重写一些旧代码，并使用Vue作为替代.除了更换一张用把手做成模板的桌子之外，一切都很棒.

使用handlebars nested {{each}}，我可以在表格行中显示相关数据的同时，通过嵌套的数据 struct 向下工作:例如，使用handlebars:https://jsfiddle.net/6dsruo40/1/

我不知道如何使用Vue和v-for等来实现同样的效果.

尽我所能胡乱摆弄:https://jsfiddle.net/cj7go6bv/

我不知道如何处理数据 struct ，同时保持车把中的<tr>

这是我正在使用的数据 struct ，但它很灵活:

var data = [
  {
key: "Region 1",
values: [
  {
    key: "Sub region 1",
    values: [
      {
        site: "Site A",
        timestamp: 1507246300935,
        total: 3,
      },
      {
        site: "Site B",
        timestamp: 1507246300818,
        total: 0,
      },
      {
        site: "Site C",
        timestamp: 1507246300936,
        total: 0,
      }
    ],
  },
  {
    key: "Sub region 2",
    values: [
      {
        site: "Site A",
        timestamp: 1507246301442,
        total: 20,
      },
      {
        site: "Site B",
        timestamp: 1507246301788,
        total: 5,
      }
    ]
   },
  {
    key: "Sub region 3",
    values: [
      {
        site: "Site A",
        timestamp: 1507246302503,
        total: 66,
      },
      {
        site: "Site B",
        timestamp: 1507246302783,
        total: 2
      }
    ]
  }
]
   },
   {
key: "Region 2",
values: [
  {
    key: "Sub region 1",
    values: [
      {
        site: "Site A",
        timestamp: 1507246306789,
        total: 0,
      },
      {
        site: "Site B",
        timestamp: 1507246307439,
        total: 6,
      }
    ]
  },
  {
    key: "Sub region 2",
    values: [
      {
        site: "Site A",
        timestamp: 1507246308269,
        total: 10,
      },
      {
        site: "Site B",
        timestamp: 1507246308683,
        total: 30,
      }
    ]
  }
]
}
];

到目前为止，我掌握的Vue代码非常有限:

Vue.component('project-table', {
  template: '#table-template',
  props: {
    data: Array
  }
});

var app = new Vue({
    el: '#table-container',
    data: {data: sites},
    });

模板:

<div id="table-container">
  <project-table :data="data"></project-table>
</div>
    <script id="table-template" type="text/x-template">
        <table class="u-full-width">
            <thead>
                <tr>
                <th>Project location</th>
                <th>Total</th>
                <th>Timestamp</th>
            </tr>
        </thead>
        <tbody>
        <tr class="name-row" v-for="item in data">
            <th class="name" colspan="3">{{item.key}}</th>
        </tr>
        <tbody>
    </table>
</script>

Vue中显示桌子的机制是什么，就像在把手中完成的一样？谢谢