v-model is not defined, passing data from v-data-table to custom component

Question

I have a custom component fileUpload in the expansion slot of a v-data-table. After uploading files from this component, I want to update the item in the data-table. I'm trying to do this using v-model:item, but when calling the uploadFiles function, I get the error: modelItem is not defined. What am I doing wrong?

component with data tables:

    <v-data-table
          :headers="headers"
          :items="financialDocuments"
          :single-expand="singleExpand"
          :expanded.sync="expanded"
          item-key="finDocId"
          show-expand
          disable-pagination
          :hide-default-footer="true"
          no-data-text='Geen data'
        >
        
          <template v-slot:[`item.actions`]="{ item }">
            <v-icon large @click="deleteTutorial(item.id)">
              mdi-file-find-outline
            </v-icon>
            <v-icon large class="mr-2" @click="editTutorial(item.id)">
              mdi-file-send-outline
            </v-icon>
          </template>
          <template v-slot:expanded-item="{ item }">
            <td :colspan="attachmentHeaders.length">
              <v-data-table
                :headers="attachmentHeaders"
                :items="item.attachmentPlainDtos"
                item-key="finDocId"
                disable-pagination
                :hide-default-footer="true"
                no-data-text='Geen bijlagen'
              >
                <template #item.attachment="{ item }">
                  <a target="_blank" :href="item.attachmentUri">
                    {{ item.attachmentName }}
                  </a>
                </template>
                <template v-slot:[`item.attachmentActions`]="{ item }">
                  <v-icon large @click="deleteTutorial(item.id)">
                    mdi-delete
                  </v-icon>
                </template>
              </v-data-table>
              <FileUpload v-model:modelItem="item"></FileUpload>
            </td>            
          </template>
        </v-data-table>
    ....

export default {
    name: "financialDocumentList",
    data() {
        return {
            financialDocuments: [],
            singleExpand: true,
            headers: [
                { text: "DocId", align: "start", sortable: false, value: "finDocId" },
                { text: "Omschrijving", value: "description", sortable: false },
                { text: "Relatienummer", value: "debtor.debtorCode", sortable: false },
                { text: "Afleverwijze", value: "debtor.debtorDocumentDeliveryPreference", sortable: false },
                { text: "Documenttype", value: "debtor.debtorDocumentTypePreference", sortable: false },
                { text: "Acties", value: "actions", sortable: false },
            ],
            attachmentHeaders: [
                { text: "Bijlage", align: "start", value: "attachment", sortable: false},
                { text: "Acties", value: "attachmentActions", sortable: false },
            ],
        };
    },
methods: {
   .....

fileUpload component:

export default {


props: ['modelItem'],
  name: "file-upload",
  data() {
    return {
    };
  },
  methods: {
    async uploadFiles() {
      for (let i = 0; i < this.selectedFiles.length; i++) {
        await this.upload(i, this.selectedFiles[i]);
      }
    },
    upload(idx, file) {
      return new Promise((resolve, reject) => {
      var finDocId = this.modelItem.finDocId;
      FinancialDocumentDataService.upload(finDocId, file, (event) => {
      }).then((response) => {
          this.modelItem = response.data;
          return resolve(response);
      }).catch((e) => {
          return reject(e);
        });
    });
    }
  }
};

Answer 1

v-model on components are exposed as modelValue (not modelItem). Source

...
  props: ['modelValue'],
...

or named like this

// parent
...
  <FileUpload v-model:modelItem="item"></FileUpload>
...

// child
...
  props: ['modelItem'],
...