Why does my target-activated dialog not appear except for the first row of the table?

I'm using Vue 3 and Vuetify 3. I'm trying to get my current app to display a row from a <v-data-table in a dialog that is in its own component but it doesn't work properly: the dialog will appear if I click on the delete icon in the Actions3 column for the 1st row of the table but not for any of the others delete buttons in the Actions3 column. This playground illustrates the problem.

A bit of context, the initial version of this app only had one delete button, the one in the Actions column. Its job was to immediately delete the row of the table for which the delete button had been pressed. This worked great but was a bit dangerous because the user might not realize that it was a delete button and might be unhappy about deleting a row with it so I added the Actions2 column which also has a delete button for each row.

The button in the Actions2 column displays a dialog that shows the contents of the row and gives the user the choice of confirming the deleting or canceling it. This works exactly as designed. But I wasn't crazy about the approach I used since I had to code an extra module for the composable that would control the opening and closing of the dialog so I added the Actions3 button and wrote it so that it would use a target-activated dialog that showed the contents of the row and offered the same two buttons, one to confirm the delete, the other to cancel the delete.

This is where the trouble comes in. The button in the Actions3 column only ever displays a dialog for the FIRST row of the table so that's the only one I can delete. I need the dialog to come up for EACH of the delete buttons in the Actions3 column, not just the first one.

Important note

The code to actually delete the data from the rows has been removed for all three columns so it is perfectly safe to press any of the red trash cans or the red Delete buttons in the dialog; no actual data will be lost.

If I can get all of Actions3 buttons to work correctly, I plan to delete the Actions and Actions2 columns from the table.

Update

I tried coding it the way Moritz suggested in his comment but I've obviously done it wrong because the ConfirmDelete2 dialog is not coming up for any button in the Actions3 column. Here is my revised playground.

I would suggest using the item to trigger the dialog:

• The activator only sets selectedItem to the current item (I would use VBtn instead of VIcon):

<v-btn
  icon="mdi-delete"
  variant="plain"
  @click="event => selectedItem = item"
/>

• ConfirmDelete2 takes an item as model, rest of the props are removed, as the data can be accessed through item directly:

// in ConfirmDelete2 setup 

type Item = {...}
const model = defineModel<Item|null>()

• VDialog should appear whenever the model is set. Since item data is used in the dialog, using v-if instead of :modelValue="Boolean(model)" avoids a model is null error:

<v-dialog
  v-if="model"
  :modelValue="true"
  ...

• After deletion, unset model to close the modal:

const deleteRecord = () => {
  ...
  model.value = null // <--- defineModel emits `update:modelValue`
}

• Now the parent can simply use v-model to pass selectedItem, it will be unset when the dialog is closed (updated by v-model)

<ConfirmDelete2 v-model="selectedItem" />

Here is the updated playground.

Hope it helps! Let me know if something is unclear.