Edit in JSFiddle

Vue.component('slam-dunk', {
	template: '#slamDunk',
  props: ['character']
})

var app = new Vue({
  el: '#app',
  data: {
    data: [{
        name: '櫻木花道',
        height: 188,
        weight: 83,
      },
      {
        name: '流川楓',
        height: 187,
        weight: 75,
      },
      {
        name: '仙道彰',
        height: 190,
        weight: 79,
      },
      {
        name: '牧紳一',
        height: 184,
        weight: 79,
      },
    ]
  }
})

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div id="app">
    <table class="table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>身高(cm)</th>
          <th>體重(kg)</th>
        </tr>
      </thead>
      <tbody>
        <tr
          is="slam-dunk"
          v-for="(item, key) in data" 
          :character="item" 
          :key="key"
        >
        </tr>
        <!-- <slam-dunk
          v-for="(item, key) in data" 
          :character="item" 
          :key="key"
        >
        </slam-dunk> -->
      </tbody>
    </table>
  </div>
  
  <script type="text/x-template" id="slamDunk">
  	<tr >
    	<td>{{ character.name }}</td>
      <td>{{ character.height }}</td>        
      <td>{{ character.weight }}</td>
    </tr>
  </script>