How to refactor this table with Vue? - vue.js

Question

I have a table where I have 6 rows and 4 columns that looks like this
`
<template>
<div class="col-md-12">
<fieldset>
<legend>Sellers Data Comparison</legend>
<div class="row">
<div class="col-xs-12">
<table class="table table-condensed" id="SellersDataComparisonTable">
<thead>
<tr>
<th>
<h4></h4>
</th>
<th class="numeric">Sellers Data</th>
<th class="numeric">Asset Index</th>
<th class="numeric">Deviation</th>
</tr>
</thead>
<tbody>
<tr>
<td><label># Accounts</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.NumberOfAccounts,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.AssetIndex.NumberOfAccounts,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.NumberOfAccounts ,'0,0') }}
</td>
</tr>
<tr>
<td><label># Customers</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.NumberOfCustomers,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.AssetIndex.NumberOfCustomers,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.NumberOfCustomers,'0,0') }}
</td>
</tr>
<tr>
<td><label>Principal</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.Principal,'0,0.00') }}
</td>
<td class="numeric">
{{useFormatNumber( store.assetIndexSummary?.SellersDataComparison.AssetIndex.Principal,'0,0.00') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.Principal,'0,0.00') }}
</td>
</tr>
<tr>
<td><label>Face Value</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.FaceValue,'0,0.00') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.AssetIndex.FaceValue,'0,0.00') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.FaceValue,'0,0.00') }}
</td>
</tr>
<tr>
<td><label>L12 payers</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.NumberOfPayersInLast12M,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.AssetIndex.NumberOfPayersInLast12M,'0,0') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.NumberOfPayersInLast12M,'0,0') }}
</td>
</tr>
<tr>
<td><label>L12 avg payment</label></td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.LatestSellersData.AveragePaymentsinLast12M,'0,0.00') }}
</td>
<td class="numeric">
{{useFormatNumber( store.assetIndexSummary?.SellersDataComparison.AssetIndex.AveragePaymentsinLast12M,'0,0.00') }}
</td>
<td class="numeric">
{{ useFormatNumber(store.assetIndexSummary?.SellersDataComparison.Deviation.AveragePaymentsinLast12M,'0,0.00') }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</template>
`
As you can see it is very copy paste and clunky, I am trying to make it reusable and more elegant with vue.js, here is the problem I have the data for each column is coming from a different source - LatestSellersData, AssetIndex and Deviation.
What I tried was making a TableRow.Vue component that looks like this
<template>
<tr>
<td><label>{{ label }}</label></td>
<td class="numeric">{{ useFormatNumber(itemValue) }}</td>
<td class="numeric">{{ useFormatNumber(itemValue) }}</td>
<td class="numeric">{{ useFormatNumber(itemValue) }}</td>
</tr>
</template>
<script lang="ts">
import { defineComponent, inject } from 'vue';
import useFormatNumber from '#/use/formatNumber';
export default defineComponent({
props: {
label: String,
itemValue: Number,
},
setup() {
return {
useFormatNumber
};
}
})
</script>
The problem with this is the table data would look like this because I need to be putting value in to columns not rows
AssetIndex
Latest Data
Deviation
Number of People
1
1
1
Value
2
2
2
Average value
3
3
3
What I want it to look like is this
AssetIndex
Latest Data
Deviation
Number of People
1
2
3
Value
1
2
3
Average value
1
2
3
Hope I made my problem clear, thanks in advance!