I’m trying to use @vueuse/core to allow a user to a select a file in vue. At this point, I’d be happy with just having the method return the filepath so I can eventually process it. I’m following along here: (https://vueuse.org/core/useFileDialog/). When I click the link, a window pops up and prompts me to select a file. When I select a file, nothing happens and I’m presuming that the file is returning null. Any idea what’s wrong?

Here’s some of my code:

<script setup>
    import IconUpload from "./icons/IconUpload.vue"
    import { useFileDialog } from "@vueuse/core"; 
    const { files, open } = useFileDialog()
</script>

<template>
    <a href @click="open()"><IconUpload /></a>
    <template v-if="filesSelected">
        Files: {{ files }}
        <li v-for="file in files" :key="file.name">
            Files: {{ file.name }}
        </li>
    </template>
</template>

Not sure if it’s helpful, but I’m using @vueuse/core: ^10.9.0.