vue3：将异步表达式处理为 ref

如何解决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 });