Mostrar los datos cargados entre llaves utilizando la API de composición de Vue 3.

¿Alguien puede explicar la diferencia entre lo siguiente, por favor?

Versión de la API de opciones

Muestra los datos cargados en el DOM como se espera.

export default {
    data() {
        return {
            config: {},
        };
    },
    async mounted() {
        this.config = await fetch('/path/to/file.json');
    },
    template: `<div>{{ config }}</div>`
}

Versión de la API de composición

Muestra el estado inicial de config pero no los datos cargados.

import { onMounted, reactive } from 'vue';

export default {
    setup() {
        let config = reactive({});

        onMounted(async () => {
            config = await fetch('/path/to/file.json');
        });

        return {
            config,
        };
    },
    template: `<div>{{ config }}</div>`
}

Sospecho que la función reactive() está siendo sobreescrita por la carga de datos asíncronos (y puedo imprimir el nuevo dato en la función onMounted), pero no puedo encontrar nada en la documentación que indique cómo actualizar en masa un objeto reactivo como este (especialmente cuando funciona en la API de opciones).

Edit: Pensamientos finales:

He comenzado a utilizar objetos reactive para proporcionar e inyectar datos en la aplicación y luego utilizar toRefs como una forma JIT de proporcionar datos reactivos a mis vistas. Esto parece ser lo mejor de ambos mundos.

Ejemplo:

import { onMounted, reactive, toRefs } from 'vue';

export default {
    setup() {
        const data = reactive({
            config: {},
        });

        onMounted(async () => {
            data.config = await fetch('/path/to/file.json');
        });

        return {
            ...toRefs(data),
        };
    },
    template: `<div>{{ config }}</div>`
}