Vue 3 Vuetify 3 v-data-table cells are not editable

Question

Since the upgrade from Vue 2 to Vue 3 and Vuetify 3, our datatable row cells are no longer editable. I have changed headers from using text,value to use title,key, and the rows are showing properly, they are just not editable. Have searched and can't find for latest version of vue/vuetify.

Here is the code (cannot show picture of resultant table). Appreciate any assistance, there is something I am missing with latest version. Note: We had v-slot:body before we upgraded, but if I use that now, my rows won't even show, so I switched it to pageText, and at least my rows now show, the cells are just not editable.

      <v-data-table :headers="computedHeaders" :items="computedItems">
        <template v-slot:pageText="{ items, headers }">
          <tbody>
            <tr v-for="(item, idx) in items" :key="idx">
              <td v-for="(header, indx) in headers" :key="indx" :class="'text-' + header.align">
                <v-edit-dialog :return-value.sync="item[header.key]" large>
                  {{ item[header.key] }}
                  <template v-slot:input>
                    <v-text-field v-model="item[header.key]" label="Edit" single-line></v-text-field>
                  </template>
                </v-edit-dialog>
              </td>
            </tr>
          </tbody>
        </template>
      </v-data-table>

Answer 1

Well guys, here is how to make it work in vue3 and vuetify3. I still need to tweak the dialog to have save and cancel buttons, but all is working now:

      <v-data-table :headers="computedHeaders" :items="computedItems">
          <tbody>
            <tr v-for="(item, idx) in computedItems" :key="idx">
              <td v-for="(header, indx) in computedHeaders" :key="indx" :class="'text-' + header.align">
                
                 <v-dialog width="500">
                  <template v-slot:activator="{ props }">
                    <v-label v-bind="props">{{ item[header.key] }}</v-label>
                  </template>

                  <template v-slot:default="{ isActive }">
                    <v-card title="Dialog">
                      <v-card-text>
                        <v-text-field v-model="item[header.key]" label="Edit" single-line></v-text-field>
                      </v-card-text>

                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn text="Close Dialog" @click="isActive.value = false"></v-btn>
                      </v-card-actions>
                    </v-card>
                  </template>
                </v-dialog>
              </td>
            </tr>
          </tbody>
       </v-data-table>