vue3将异步表达式处理为ref

 <template>
    <span v-html="svg" />
 </template>
 <script>

    import { ref, watchEffect } from 'vue'

    function asyncToRef(callback) {

        const val = ref();
        watchEffect(() => callback().then(value => val.value = value)); // TBD handle catch()...
        return val;
    }

    export default {
        props: {
            name: String
        },
        setup(props) {
            return {
                svg: asyncToRef(() => import('./' + props.name + '.svg')),
            }
        }
    }

</script>

用这个更好吗?

watch(() => callback(), promise => {
  promise.then(value => val.value = value)
}, { immediate: true });