Nuxt 3使用useAsyncData从Contentful获取数据遇问题

近期将项目迁移至Nuxt 3，尝试使用useAsyncData进行数据获取，但异步函数未按预期工作。以下是使用的代码：

const route = useRoute()
const runtimeConfig = useRuntimeConfig();
import { createClient } from 'contentful';

const blogDetails = ref(null);

const fetchData = async () => {
    const response = await client.getEntries({
        content_type: 'blog',
        'fields.slug': route.params.slug
    });

    return response.items.map(item => {
        let renderOptions = {
            renderNode: {
                [BLOCKS.EMBEDDED_ENTRY]: (node, children) => {
                    if (node.data.target.sys.contentType.sys.id === "codeBlock") {
                        return `<pre>
                            <code>${node.data.target.fields.code}</code>
                        </pre>`;
                    }

                    if (node.data.target.sys.contentType.sys.id === "videoEmbed") {
                        return `<iframe
                            src='${node.data.target.fields.embedUrl}'
                            height='100%'
                            width='100%'
                            frameBorder='0'
                            scrolling='no'
                            title='${node.data.target.fields.title}'
                            allowFullScreen=true
                        />`;
                    }
                },
                [INLINES.HYPERLINK]: (node, next) => {
                    if (node.data.uri.includes("player.vimeo.com/video")) {
                        return `<div class="iframe-container">
                            <iframe
                            title="${next(node.content)}"
                            src="${node.data.uri}"
                            frameBorder='0'
                            allowFullScreen
                            ></iframe>
                        </div>`;
                    } else if (node.data.uri.includes("youtube.com/embed")) {
                        return `<div class="iframe-container">
                            <iframe
                            title="${next(node.content)}"
                            src="${node.data.uri}"
                            allow='accelerometer; encrypted-media; gyroscope; picture-in-picture'
                            frameBorder='0'
                            allowFullScreen
                            ></iframe>
                        </div>`;
                    } else {
                        return `<span class="color">
                        <a href="${node.data.uri}">${next(node.content)}</a>
                        </span>`;
                    }
                },
                [BLOCKS.EMBEDDED_ASSET]: (node, children) => {
                    return `<div class="content-img"><img
                        src="https:${node.data.target.fields.file.url}"
                        width='100%'
                        alt="${node.data.target.fields.description}"
                        /></div>`;
                },
            },
        }

        const { id, createdAt } = item.sys;
        const { title, description } = item.fields;
        const featuredImage = item.fields.featuredImage.fields.file.url;
        const content = item.fields.details;
        const details = documentToHtmlString(content, renderOptions);
        const customDate = getCustomDate(createdAt);

        return {
            id, title, featuredImage, description, details, createdAt, customDate
        };
    });
};

const { data: blogDetails, pending, error, refresh } = useAsyncData('blogDetails', fetchData);

已确认以下内容：

• 导入路径正确
• client.getEntries可正常访问
• 相关库已正确安装导入

现咨询：

• useAsyncData的实现是否存在遗漏？
• fetchData函数结构在Nuxt 3环境下是否正确？

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