Vue.js table template v-for Example

<div id="maintable">
    <table>
        <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">連結</th>
          <th scope="col">名稱</th>
        </tr>
        </thead>
        <tbody>
        <template v-for="(item, index) in menulist">
          <tr>
            <th>{{ index + 1 }}</th>
            <td><a :href="item.dm_link">{{ item.dm_key }}</a></td>
            <td>{{ item.dm_name }}</td>
          </tr>
        </template>
        </tbody>
    </table>
</div>

let maintable = new Vue({
  el: '#maintable',
  data: {
    menulist: [
      {dm_key: 'TW1', dm_link: 'menu/TW1', dm_name: 'Innonext 1'},
      {dm_key: 'TW2', dm_link: 'menu/TW2', dm_name: 'Innonext 2'},
      {dm_key: 'TP1', dm_link: 'menu/TP1', dm_name: 'Innonext 3'},
      {dm_key: 'TP2', dm_link: 'menu/TP2', dm_name: 'Innonext 4'},
    ]
  },
  methods: { }
});