I have a v-data-table that is used in a table component I am building out. I pass data as a prop which then I do a few things to clean up then also run an async function which grabs some data from an api as follows:

  //load cloud storage data
  const cleanData = ref<any[]>()

  const loadThumbnails = async (dmcp_tab_id : number, dmcp_box_id : string) => {
    let attempts : number = 1
    const result = ref<CloudStorage | null>()
    do {
        attempts=attempts+1
        result.value = await documentStore.getCloudStorage(dmcp_tab_id, dmcp_box_id)
      } while (result.value!.thumbnail == "" && attempts <= 5)
    
    return result.value?.thumbnail
  }

  const loadCloudStorageData = () => {
    cleanData.value = props.data
    cleanData.value = props.data.map(async (item) => { return {...item, when_uploaded: dayjs(item.when_uploaded).format('MM/DD/YYYY'), thumbnail: await loadThumbnails(item.dmcp_tab_id, item.dmcp_box_id)}})
  }

  loadCloudStorageData()
  watch(props.data, () => {
    loadCloudStorageData()
  })

When I look at the cleanData and console.log() it it is an array of promises so nothing loads into the v-data-table. However, if I were to remove this await and async thumbnail then it will load everything as fine into v-data-table. I am not sure how to handle promises with v-data-table.