Loading the same content for every article???

[Shaun-FV]

I've setup my Nuxt Content on a simple website with a table of contents page - here's my structure

• /content

  • /topic1
    • /article.md
  • /topic2
    • /another-article.md

• /pages

  • /resources
    • /[...slug].vue
    • /index.vue

In my index.vue I have:

<template>
    <ul>
        <li v-for="{ _path: slug, title, description } in blogPosts" :key="slug">

            <NuxtLink :to="'/resources'+slug">
                <h3 class="text-xl font-bold">{{ title }}</h3>
                <p class=" mb-4">{{ description }}</p>
            </NuxtLink>
        </li>
    </ul>
</template>
<script setup lang="ts">
const blogPosts = await queryContent('/')
  .sort({ date: -1 }) // show latest articles first
  .where({ _partial: false }) // exclude the Partial files
  .find()
</script>

In the [...slug].vue i have:

<ContentDoc class="prose"  :path="$route.params.slug" tag="article">
            <template #not-found >
              <h2>Blog slug ({{ $route.params.slug }}) not found</h2>
            </template>
</ContentDoc>

The issue I have is that any URL loads the same article

http://localhost:3000/resources/topic1/article

http://localhost:3000/resources/topic2/another-article

both show the content from /content/topic1/article.md

I've tried a bunch of changes but can't seem to see why? I get this 'error' in the [...slug] component

Invalid prop: type check failed for prop "path". Expected String with value "art,another-article", got Array