JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app-7">
<type-table :data='testData1'></type-table>
</div>

CSS

table,
th,
td {
  border: 1px solid black;
}

JavaScript

Vue.component('type-table', {
  props: ['data'],
  template: `
    <table>
        <thead>
        <tr>
        <th>Name</th>
        <th>Count</th>
    </tr>
    </thead>

    <tbody>
        <type-item v-for="item in data" v-bind:messagetype="item" v-bind:key="item.id"></type-item>
    </tbody>
    </table>
`,
})

Vue.component('type-item', {
  props: ['messagetype'],
  template: '<tr>' +
    '<td>{{ messagetype.name }}</td>' +
    '<td>{{ messagetype.count }}</td>' +
    '</tr>',
});

var app7 = new Vue({
  el: '#app-7',
  data: {
  	testData1: {
    	count: 5,
      name: 'Test Leo',
      id: 1
    }
  },
})