我有一个用API编写的vue组件，它工作正常，当用户选择一张图片时，它就会显示在屏幕上。
我试图将此转换为使用合成API，但它不显示图像。
这是原始组件：

<script>
export default {
  name: 'imageUpload',
  data() {
    return {
          imageUrl: null
    }
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0]
      this.imageUrl = URL.createObjectURL(file)
    }
  }
} 
</script>

<template>
    <input type="file" accept="image/*" @change="onChange" />
    <div id="preview">
      <img v-if="imageUrl" :src="imageUrl" />
    </div>
  </template>

这就是我试图把它转换成复合的方法，通过使用ref，然后用.value引用变量，我不确定我做错了什么。

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

let imageURL = ref(null);

const onChange=(e) =>{
  const file = e.target.files[0];
  imageURL.value = file;
}

</script>

<template>
    <input type="file" accept="image/*" @change="onChange" />
    <div id="preview">
      <img v-if="imageUrl.value" :src="imageUrl.value" />
    </div>
  </template>