vuejs v-model值没有在父级中更新

使用Vue3

父组件

<template>
<div class="col-12 col-lg-12">
<input-image v-model="imageFile"/>                                                            
</div>
</template>
<script>
import InputImage from "@/Pages/components/InputImage";
export default{
components : {
InputImage,
},

data() {
return {
imageFile : null,
}
}
}
</script>

InputImage(子(组件

<template>
<div class="form-group">
<div
class="base-image-input"
:style="{ 'background-image': `url(${imageData})` }"
@click="chooseImage"
>
<span v-if="!imageData" class="placeholder">Featured Image </span>
<input
class="file-input"
ref="fileInput"
type="file"
@input="onSelectFile"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imageData: null,
};
},
methods: {
chooseImage() {
this.$refs.fileInput.click();
},
onSelectFile() {
const input = this.$refs.fileInput;
const files = input.files;
if (files && files[0]) {
const reader = new FileReader();
reader.onload = (e) => {
this.imageData = e.target.result;
};
reader.readAsDataURL(files[0]);
this.$emit("input", files[0]);
}
},
},
};
</script>

选择文件v-model(imageFile(后，父组件中的值不会更改，原因是什么？甚至我还在onSelectFile((方法中向父组件发出输入事件。我在这里以编程方式设置文件名。子组件中的值发生了变化，但文件名没有反映在父组件中，我希望通过父组件中的v模型来反映。