我最近开始看 Vue 组合 API，我一定错过了一些东西，因为我发现这个“新”的方法是一个真正的 PITA！

以前，我可以使用一个简单的扩展运算符来更新我的表单数据，在 created（）钩子中调用 REST API。我试图在组合 API 中转置这个，但我有点卡住了语法变化（我知道扩展运算符“杀死”反应性）。

我能够使用 setup（）{} 方法使其工作（顺便说一句，这是我的原始页面的过度简化但工作示例）：

<script>
import { reactive, toRefs } from 'vue'
export default {
    setup() {
        let profil = reactive({
            memberNo: '',
            details: {
                firstname: '',
                lastname: '',
                date: '',
                address: {
                    city: '',
                    street: '',
                    postalCode: ''
                }
            }
        })
        return {
            ...toRefs(profil)
        }
    },
    created() {
       // Call some API
        let dataFromApi = {
            memberNo: '1234',
            details: {
                firstname: 'Micheal',
                lastname: 'Jordan',
                date: '1967-01-21',
                address: {
                    city: 'Quebec',
                    street: 'No street',
                    postalCode: 'H0H 0H0'
                }
            }
        }
        this.profil = { ...this.profil, ...dataFromApi }
    }
}
</script>
<template>
    <p>
        {{ profil.memberNo }}
        {{ profil.details.firstname }}
    </p>
</template>

所以使用 toRefs（）方法它工作。但是如果我想用<script setup>标签全部进去，我找不到一种方法来使这个工作？！？

这 code 不与传播的工作，但“确定”与个人分配（备注）

<script setup>
import { reactive, onBeforeMount, toRefs } from 'vue'
let profil = reactive({
    memberNo: '',
    details: {
        firstname: '',
        lastname: '',
        date: '',
        address: {
            city: '',
            street: '',
            postalCode: ''
        }
    }
})
onBeforeMount(() => {
  // Call some API
    let dataFromApi = reactive({
        memberNo: '1234',
        details: {
            firstname: 'Micheal',
            lastname: 'Jordan',
            date: '1967-01-21',
            address: {
                city: 'Quebec',
                street: 'No street',
                postalCode: 'H0H 0H0'
            }
        }
    })
  // Don't work
    profil = { ...toRefs(profil), ...toRefs(dataFromApi) }
  // ... but this work
    // profil.memberNo = dataFromApi.memberNo
    // profil.details.firstname = dataFromApi.details.firstname
})
</script>

请给我我的信仰与组合 API，否则我会坚持这个项目的其余部分的选项！:-)