Add multiple v.slots with a v-for with Bootsrtap-Vue

My table data has nested objects, so I need to use a v-slot to render it correctly on a table. The thing is that the table columns depend on the lenght of another array.

I tried using a v-for outside my v-slot, but then I get an error telling me that the v-slots need to be directly under the root level inside its component.

<div v-for="plant in stockTable.plants" :key="plant.key">
    <template v-slot:cell(plant.name)="row">

    </template>
</div>

My data looks like this:

{ key: 1, description: 'Stock-1', plants: [{ key: 1, name: 'Plant-1', inventory: [{ type: 'Physical', stock: 875 }, { type: 'Virtual', stock: 1540 }] }, { key: 2, name: 'Plant-2', inventory: [{ type: 'Physical', stock: 458 }, { type: 'Virtual', stock: 525 }] }] }

And the array it depends on it this one:

plants: [{ key: 1, name: 'Plant-1' }, { key: 2, name: 'Plant-2' }]

It has to create columns with the second array, and show the corresponding data of the first one.

Edit: This is a mock up of what I'm trying to do

Found another similar question wich was correctly answered. For what I understand, the issue had to do with some string interpolation.

Here's the answer:

https://stackoverflow.com/a/58143362/11932235