自定义 useFetch 可组合项无法按预期工作

问：

我正在尝试在我的 nuxt 3 项目中创建一个可组合函数，以从我的 strapi cms 中获取一些日期。 我想将所有组件和页面中的 fetch 函数简化为具有 2 或 3 个参数的简单方法，例如路径或可选的 pick 参数。然后，可组合函数应使用 baseURL 和 runtimeConfig 中的 strapi apiToken 执行 useFetch，并在返回响应后执行 transform 函数。

这是一个从 vue 页面截取的工作代码来测试：

<template>
    <div id="dev">
        <h1>Dev</h1>
        <h3>Test Fetches</h3>
        <p v-if="pending">Pending</p>
        <p v-else-if="data">Data: {{ data }}</p>
        <p v-else-if="error">Error: {{ error }}</p>
    </div>
</template>

<script setup>
    const headers = new Headers();
    const runtimeConfig = useRuntimeConfig()
    if (process.server) console.log(runtimeConfig);
    headers.append('Authorization', `Bearer: ${runtimeConfig.apiToken}`)
    const { data: data, pending, error, refresh } = await useFetch('/api/[content-type]?populate=deep', {
        baseURL: runtimeConfig.public.apiBaseUrl,
        headers,
        transform: (response) => {
            return response.data;
        },
        // pick: ['id']
    })
    if (process.server) console.log(data);
</script>

我试图将其移动到可组合fetchStrapi.js：

export const fetchStrapi = async (path, pick = []) => {
    const headers = new Headers();
    const runtimeConfig = useRuntimeConfig()
    if (process.server) console.log(runtimeConfig);
    headers.append('Authorization', `Bearer: ${runtimeConfig.apiToken}`)
    const { data: data, pending, error, refresh } = await useFetch(path, {
        baseURL: runtimeConfig.public.apiBaseUrl,
        headers,
        transform: (response) => {
            return response.data;
        },
        pick
    })
    if (process.server) console.log(data);
    return { data: data, pending, error, refresh }
}

并从开发页面运行它：

<template>
    <div id="dev">
        <h1>Dev</h1>
        <h3>Test Fetches</h3>
        <p v-if="pending">Pending</p>
        <p v-else-if="data">Data: {{ data }}</p>
        <p v-else-if="error">Error: {{ error }}</p>
    </div>
</template>

<script setup>
    const { data: data, pending, error, refresh } = fetchStrapi('/api/[content-type]?populate=deep');
    if (process.server) console.log(data);
</script>

但是数据中的内容没有显示，服务器的控制台会告诉：

undefined
RefImpl {
  __v_isShallow: false,
  dep: undefined,
  __v_isRef: true,
  _rawValue: {},
  _value: {}
}

我已经在 fetchStrapi 函数之前添加了一个 await，该函数导致显示在浏览器中，但仍然不是我期望的答案Data:

我的nuxt.config.ts如下所示：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  runtimeConfig: {
    apiToken: '',
    public: {
      apiBaseUrl: 'https://[urlToStrapi]',
    }
  }
})

API 令牌来自文件。.env

怎么了？

感谢您的帮助！