I have a simple image upload component using q-file to select files and use slots to preview the selected files within the q-file itself. Additionally I want to add a alt input within the qimage to store the alt along with the image. I am aware of q-uploader but I want to use q-file instead. But the preview does not work.

In order to focus on the preview part I have removed other parts:

<template>
  <q-file
    label="Select images"
    v-model="images"
    :accept="accept"
    @update:model-value="handleFileChange"
    clearable
    multiple
    append
  >
    <template v-slot:file="{ index, file }">
      <q-card class="q-pa-xs preview-card" :key="'preview_card_' + index">
        <q-img :src="getPreviewUrl(file.file)" :key="file.file.lastModified">
          <div>
            <q-input v-model="file.alt" placeholder="Enter Alt Text" />
          </div>
        </q-img>
        <!-- <q-input v-model="file.alt" /> -->
      </q-card>
    </template>
  </q-file>

  <q-btn @click="uploadImages" label="Upload" />
</template>

<script setup>
import { ref } from "vue";

const images = ref([]);
const props = defineProps({
  accept: {
    type: String,
    default: ".jpg,.jpeg",
  },
});

function handleFileChange(newFiles) {
  images.value = newFiles.map((file) => ({
    file,
    alt: "", // Initialize with empty alt text
  }));
}

function getPreviewUrl(image) {
  return URL.createObjectURL(image);
}
</script>

When I comment out the <!-- <q-input v-model="file.alt" /> --> then it works as expected displaying the preview, but without it the preview does not work. What could be the reason and solution for this?