Async Image loading with Vue3 Suspense Component

With the new Vue3 Suspense component, it seems like image loading with skeleton loaders as a default should be quite straight forward. For example, I want to have a default skeleton loader that switches to the real image when it’s been loaded like this:

            <div class="w-40">
                <Suspense>
                    <AsyncImageLoader :image-url="photoUrl" />
                    <template #fallback>
                        <SkeletonLoader shape="circle" class="mx-7 h-[106px]" />
                    </template>
                </Suspense>
            </div>

And then I define my AsyncImageLoader like this:

<template>
    <img
        :src="imageUrl"
        alt="Profile Photo"
        style="filter: invert(0); clip-path: circle(38%)"
    />
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
    name: "AsyncImageLoader",
    props: {
        imageUrl: {
            type: String,
            required: true
        }
    },
    async setup(props) {}
})
</script>

However this never loads, I believe because there is no promise resolved in the async setup(). If I try to fetch the image URL in the async setup() call I get a CORS error which also makes sense.

Is there a way to easily load images like this? It seems like it should be straight forward with Suspense, but manipulating html tag attributes seem more complicated than just updating the Virtual DOM based on an async action.