Access and declare vueJs component inside other component slot - vue.js

Question

I'm trying to declare and access an vue component inside a component slot.
The modal component will be creates several time and there it has to have an unique name but I don't no how I do that inside the slot.
using Laravel blade and vueJs
<template>
<table>
<thead>
<slot name="head"/>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<slot name="line" v-bind:item="item" />
</tr>
</tbody>
</table>
</template>
<list-component ref="teamMembers">
<template v-slot:head>
<tr>
<th>Name</th>
<th>Email-address</th>
<th>Role</th>
</tr>
</template>
<template v-slot:line="slotProps">
<td>
#{{ slotProps.item.name }}
</td>
<td>
#{{ slotProps.item.email }}
</td>
<td>
#{{ slotProps.item.role }}
</td>
<td>
<button #click="$refs.deleteItemModal#{{ slotProps.item.id }}">
Delete
</button>
</td>
<modal-component ref="deleteItemModal#{{ slotProps.item.id }}">
</modal-component>
</template>
</list-component>
How can declare and call modal component?
If I use it like this
<button #click="$refs.deleteItemModal">
and
ref="deleteItemModal"
it works but gives me always the same component.
Please advise me how I can create an unique ref to create something like this 'deleteItemModal' + slotProps.item.id

Answer 1

You can try like this:
<modal-component :ref="'deleteItemModal' + slotProps.item.id">
</modal-component>
Static value should be covered with quotation mark and can use + to concat any dynamic value with the string like in javascript.
To call openModal method of that ref component, create method in modal-component component
deleteItem(itemId) { this.$refs['deleteItemModal' + itemId].openModal() }
and then change for button click event
<button #click="deleteItem(slotProps.item.id)">