Вью-3. Установите модель данных компонента с неизвестной структурой, используя опцию API

Мой дочерний компонент должен быть создан с моделью данных, которую я получаю извне, используя выборку. Структура этой модели не предопределена (своего рода черный ящик). Важно то, что я работаю с подробным представлением какой-то сущности, а не со списком (массивом). У меня есть несколько вариантов, как это сделать, но мне не нравится ни один. Может быть, есть лучшее решение.

1. Используйте свойство $data. А вот vue документация не нравится:

Добавление новых свойств к this.$data возможно, но не рекомендуемые

<script>
    export default {
        data() {
            return {
                showDialog: false   // some predefined prop
            };
        },
        methods: {
            async fetch() {
                // fetch from external resource
            }
        },
        async created() {
            let model = await this.fetch();
            Object.assign(this.$data, model);
        }
    };
</script>
<template>
    <p>{{ Name }}</p> <!-- Name is part of model -->
</template>

2. Установите свойство model заранее. Этот подход скрывает все содержимое модели. Так что в этом случае я должен использовать this.model.Name вместо this.Name ..

Например:

<script>
    export default {
        data() {
            return {
                model: {},
                showDialog: false
            };
        },
        methods: {
            async fetch() {
                // fetch from external resource
            }
        },
        async created() {
            let 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() {
            let data = {
                showDialog: false
            };
            return Object.assign(data, this.initialModel);
        }
    };
</script>
<template>
    <p>{{ Name }}</p>  <!-- Name is part of model -->
</template>