In Vuetify 2, the v-edit-dialog was working well with v-data-table where the dialog can open up easily by clicking the cell and saving the value as shown below. After migrating to Vuetify 3 and Vue 3, this component no longer works and we are introduced with a new component called v-confirm-edit. This component looks fine but I can’t get it to open on click, it just remains open when the table first loads. Please help, I will definitely give an upvote to the answer.

Docs:

• https://vuetifyjs.com/en/api/v-confirm-edit/
• https://vuetifyjs.com/en/components/confirm-edit/

<v-data-table>
  <template>
    <td>
      <v-edit-dialog
        @save="save(item)"
        @open="open(item)"
      >
        <div
        >
          {{ item.amount }}
        </div>
        <template #input>
          <v-text-field
            v-model.number="myAmount"
            label="Edit"
            single-line
          ></v-text-field>
        </template>
      </v-edit-dialog>
    </td>
  </template>
</v-data-table>

<v-data-table>
  <template>
    <td>
      <v-confirm-edit
        v-model="myAmount"
        :model-value="newAmount"
        @save="save(item)"
        @cancel="cancel(item)"
      >
        <template #default="{ model: proxyModel, actions }">
          <v-card>
            <template #text>
              <v-text-field
                v-model="proxyModel.value"
                single-line
              >
              </v-text-field>
            </template>

            <template #actions>
              <v-spacer />
              <component :is="actions" />
            </template>
          </v-card>
        </template>
      </v-confirm-edit>
    </td>
  </template>
</v-data-table>