[Vuejs]-Rendering multiple custom dynamic tables in Vuejs

const { createApp, ref, computed } = Vue;

const tables = 
[
  {
    "id": 1,
    "enabled": true,
    "headers": [
      {
        "id": 1,
        "header_name": "LastName",
        "colVal": [ { "id": 1, "value": "Hopper" } ]
      },
      {
        "id": 2,
        "header_name": "FirstName",
        "colVal": [ { "id": 1, "value": "Grace" } ]
      }
    ]
  },
  {
  "id": 2,
  "enabled": true,
  "headers": [
    {
      "id": 1,
      "header_name": "LastName",
      "colVal": [
        { "id": 1, "value": "Hopper" },
        { "id": 3, "value": "Lovelace" }
      ]
    },
    {
      "id": 2,
      "header_name": "FirstName",
      "colVal": [
        { "id": 2, "value": "Grace" },
        { "id": 4, "value": "Ada" }
      ]
    }
  ]
}
]

const MyTable = {
  props: ['data'],
  setup(props) {
    const headers = computed(()=>{
      return props.data?.headers.map(h => ({header:h.header_name, id:h.id}))
    })

    const rows = computed(()=>{
      let rowData = [];
      props.data?.headers.forEach(h => {
        let key = h.header_name
        h.colVal.forEach((r, i) => {
          if(!rowData[i]) {rowData[i] = {id:i}}
          rowData[i][key] = r.value
        })
      })
      return rowData
    })
    return { headers, rows } 
  },
  template: '#my-table-template'
}

const App = { 
  components: { MyTable },
  setup(props) {
    return { tables } 
  }
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }
table, th, td { border: 1px solid lightgrey; }
th { background-color: lightgrey; }
th, td { text-align: center; width: 1%;}

<div id="app" v-cloak>
<div v-for="table in tables">
<my-table :data="table"></my-table><br/>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script type="text/x-template" id="my-table-template">
<table v-if="headers">
  <thead>
    <tr>
      <th v-for="{header, id} in headers" :key="id">{{header}}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in rows" :key="row.id">
        <td v-for="{header, id} in headers">
          {{ row[header] }}
        </td>
    </tr>
  </tbody>
</table>
</script>