Vue3选项式API：如何处理未知结构的组件数据模型

我需要为子组件创建一个通过Fetch从外部获取的数据模型，该模型结构未知（类似黑盒），且为单个实体详情而非数组。我尝试了三种实现方案，但均不满意，希望得到更优解：

方案1：直接扩展$data属性 #

存在问题：Vue官方文档明确不推荐此方式：

可以向this.$data添加新属性，但不建议这么做

代码示例：

<script>
export default {
    data() {
        return {
            showDialog: false   // 预定义的组件内部属性
        };
    },
    methods: {
        async fetch() {
            // 从外部资源获取实体数据
        }
    },
    async created() {
        const model = await this.fetch();
        Object.assign(this.$data, model);
    }
};
</script>
<template>
    <p>{{ Name }}</p> <!-- Name为获取到的模型中的属性 -->
</template>

方案2：预先定义model容器属性 #

存在问题：模型的所有属性都被嵌套在model对象下，必须通过model.Name而非直接Name访问，使用不够直观便捷。

代码示例：

<script>
export default {
    data() {
        return {
            model: {},
            showDialog: false
        };
    },
    methods: {
        async fetch() {
            // 从外部资源获取实体数据
        }
    },
    async created() {
        const model = await this.fetch();
        Object.assign(this.$data.model, model);
    }
};
</script>
<template>
    <p>{{ model.Name }}</p>
</template>

方案3：父组件通过Props传递模型 #

存在问题：我更希望子组件自行封装数据获取逻辑，无需依赖父组件传递数据，保持组件的独立性。

代码示例：

<script>
export default {
    props: ['initialModel'],
    data() {
        const data = {
            showDialog: false
        };
        return Object.assign(data, this.initialModel);
    }
};
</script>
<template>
    <p>{{ Name }}</p>  <!-- Name为传递过来的模型中的属性 -->
</template>

内容的提问来源于stack exchange，提问作者Martin