[Bug Report][3.6.14] v-menu in each row of v-data-table

[dombrga]

Environment

Vuetify Version: 3.6.14
Vue Version: 3.4.36
Browsers: Edge 128.0.0.0
OS: Windows 10

Steps to reproduce

I provided a vuetify playground link for complete example.

The idea is that I want to put a menu (for actions like edit, delete, etc, that item in the table) in every row.
Problem is if I put a menu and click it, multiple menus will open, and they will be overlapping with each other. If you have 10 rows currently showing, 10 menus will show. So, if you try to close the menu, you will have to close 10 overlapping menus.
And the menu only opens for the first row.

Important bit

<template v-slot:item.actions="{ item  }">
  <v-btn id="menu-activator"> open menu </v-btn>
  <v-menu activator="#menu-activator">
    <v-list>
      <v-list-item>
        <v-icon class="me-2" size="small" @click="editItem(item)">
          mdi-pencil
        </v-icon>
      </v-list-item>
      <v-list-item>
        <v-icon size="small" @click="deleteItem(item)"> mdi-delete </v-icon>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

Expected Behavior

Menu will open specifically for each row of v-data-table.

Actual Behavior

Menu opens only for the first row, and there will be multiple overlapping menus. The number of menus that will open depends on the rows currently showing in the table.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Thank you for any fix or recommendation anyone can provide!

[KaelWD]

Use one of the other ways of setting an activator (https://vuetifyjs.com/en/components/menus/#usage) or make sure you give each one a unique id.