Vue v-for directive causing unexpected additional components

Question

I am trying to use Nuxt Content to create a blog section of my website. I have created the directory structure and some testing posts. I have also created the query that grabs the posts and stores them as a ref so they can be used on the page. My issue is that the components I see on the page do not match what is returned 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 resulting website output on the page

An image of Vue DevTools showing only 5 components produced by v-for directive

I have tried adding a :key="post._id" to the code but that hasn't solved anything. I thought giving Nuxt a means of tying a post to the data on the backend might help it but sadly no such luck

EDIT Adding image of recentBlogPosts variable added to page via mustache-syntax (not allowed to inline it because I'm a low-rep newbie):

https://i.sstatic.net/PBAJM.png

Answer 1

The issue appeared to be my using a v-for directive on a <NuxtLink> tag. The new code below works:

<div v-for="post in recentBlogPosts" :key="post._id">
  <NuxtLink :to="`blog/${post.slug}`">
    <BlogPostShort class="blog-post-short"
      :title="post.title"
      :createdDate="post.created"
      :updatedDate="post.updated"
      :excerpt="post.excerpt"
      :tags="post.tags" />
  </NuxtLink>
</div>