Currently, I'm in the process of utilizing Nuxt Content to build a blog section for my website. After setting up the directory structure and testing some posts, I proceeded to create a query that fetches the posts and stores them as a ref for page usage. However, I've encountered an issue where the components displayed on the page do not correspond with what is retrieved by the Nuxt Content query.
Snippet
<script setup>
const { data: recentBlogPosts } = await useAsyncData(`content-${path}`, () => {
return queryContent()
.only(['title', 'excerpt', 'created', 'updated', 'slug', 'tags', '_id'])
.limit(5)
.sort({ 'updated': -1 })
.find()
})
index.vue Page Snippet
<nuxt-link v-for="post in recentBlogPosts" :key="post._id" :to="`blog/${post.slug}`">
<BlogPostShort class="blog-post-short"
:title="post.title"
:createdDate="post.created"
:updatedDate="post.updated"
:excerpt="post.excerpt"
:tags="post.tags" />
</nuxt-link>
The output shown on the webpage
Vue DevTools displaying only 5 components generated by the v-for directive
I attempted adding a :key="post._id" to no avail. My assumption was providing Nuxt a way to connect a post to the backend data might assist, but unfortunately, it didn't work out.
EDIT Here is an image of the recentBlogPosts variable introduced to the page using mustache-syntax (cannot inline it due to being a low-rep newbie):