I've created a dynamic table component that allows me to modify columns by changing their ordering, adding new ones, or removing existing ones. The structure of my table body is as follows:
<tr v-for="row in data" :key="row.id">
<td v-for="column in columns" :key="column.slug">
<component
v-if="column.component"
:is="column.component"
v-bind="{ row: row, countries: row.reach }"
/>
<template v-else>
{{ row[column.slug] }}
</template>
</td>
</tr>
Although everything functions properly initially, I encounter an issue when making changes to the data (such as adding a new column or reordering the existing ones) - all components within the table body disappear and are not rendered. I attempted to assign unique :key values to each <component>, but could not get it to work. Vue devtools show that the components exist inside the table body, yet they are not being rendered into the DOM. Inspecting the table within Chrome devtools reveals only
<!--function(e,n,r,o){return dn(t,e,n,r,o,!0)}-->