Mystery and misery of async await - it's supposed to be only syntactic sugar, right? Why??

broken-composable.ts

import { useChat } from '~composables/useChat';
import { useToken } from '~composables/useToken';
import { useUser } from '~composables/useUser';
import { useCompletion as useCompletionVercel } from 'ai/vue';
import { ref } from 'vue';

export async function useCompletion() {
    async function init() {
        const { token, workerHost } = await useToken();
        const { chat } = await useChat();
        const { getHeadersForRequest } = await useUser();

        const completionId = ref('');
        const { complete, completion, isLoading } = useCompletionVercel({
            api: `${workerHost}/api/of/completion`,
            body: chat,
            headers: {
                Authorization: `Bearer ${token.value}`,
                ...getHeadersForRequest(),
            },
            onResponse(response) {
                // Extract X-Completion-Id header from response and store it in currentId
                const headers = response.headers;
                const id = headers.get('X-Completion-Id');
                completionId.value = id;
            },
        });

        return {
            completionId,
            completion,
            complete,
            isLoading,
        };
    }

    return {
        init,
    };
}

// On init() throws:
// use-swrv.ts:168 Could not get current instance, check to make sure that `useSwrv` is declared in the top level of the setup function.
// Uncaught (in promise) TypeError: Cannot destructure property 'data' of 'useSWRV2(...)' as it is null.
    at useCompletion (use-completion.ts:77:11)

good-composable.ts

import { useChat } from '~composables/useChat';
import { useToken } from '~composables/useToken';
import { useUser } from '~composables/useUser';
import { useCompletion as useCompletionVercel } from 'ai/vue';
import { ref } from 'vue';

export async function useCompletion() {
    const { token, workerHost } = await useToken();
    const { chat } = await useChat();
    const { getHeadersForRequest } = await useUser();

    function init() {
        const completionId = ref('');
        const { complete, completion, isLoading } = useCompletionVercel({
            api: `${workerHost}/api/of/completion`,
            body: chat,
            headers: {
                Authorization: `Bearer ${token.value}`,
                ...getHeadersForRequest(),
            },
            onResponse(response) {
                // Extract X-Completion-Id header from response and store it in currentId
                const headers = response.headers;
                const id = headers.get('X-Completion-Id');
                completionId.value = id;
            },
        });

        return {
            completionId,
            completion,
            complete,
            isLoading,
        };
    }

    return {
        init,
    };
}