how to get data from markdown file and send it to component using nuxt content

Question

i add nuxt content to my project

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: ["@nuxt/content"],
})

i create a blog component that contain all the blog like card and when you click the card you will read more about that blog

<template>
<div class="md:-mt-10  relative w-full min-h-[400px]">
<img src="/img/blog-hero.webp" alt="" class="object-cover w-full min-h-[400px]">
<div class="w-full h-full absolute inset-0 bg-blue-600 opacity-70"></div>
<h1 class="font-bold text-3xl sm:text-5xl text-white absolute -translate-x-1/2 -translate-y-1/2 z-40 top-1/2 left-1/2"> REP - Blog  </h1>
</div>
<template class=" mx-auto" v-for="blog in blogS">
    <div class=" grid place-content-center my-7 ">
        <CardB :blog="blog" :blogPath="blog.id" />   
    </div>
</template>
</template> 
<script setup>
import {blogS} from "/data.js"
import CardB from "/chunks/CardBlog.vue"
</script>

this is the blogS

export const blogS = [
    {
        "id":1,
        "img":'/img/10.webp',
        'user':'Radiant Emergency Plumber',
        'timeCreation':"12 December 2023",
        "title":"Smart Plumbing Systems: Enhancing Home Efficiency",
        "discription":"Explore the world of smart plumbing systems and how they contribute to enhanced home efficiency. Discover cutting-edge technologies and trust Radiant Emergency Plumber for seamless installations in Manchester.",
        "tags":[
            "Smart Plumbing Systems",
            "Home Efficiency",
            "Plumbing Technology",
            "Manchester Plumbing"
        ]
    },
    {
        "id":2,
        "img":'/img/9.webp',
        'user':'Radiant Emergency Plumber',
        'timeCreation':"12 December 2023",
        "title":"Dealing with Hard Water Issues in Your Plumbing System",
        "discription":"Learn how to tackle hard water problems affecting your plumbing. Discover effective solutions and trust Radiant Emergency Plumber for expert advice and services in Manchester.",
        "tags":[
            "Hard Water Issues",
            "Plumbing Solutions",
            "Plumbing Solutions",
            "Plumbing Solutions"
        ]
    },
    {
        "id":3,
        "img":'/img/7.webp',
        'user':'Radiant Emergency Plumber',
        'timeCreation':"12 December 2023",
        "title":"Eco-Friendly Plumbing Fixtures: A Sustainable Home Guide",
        "discription":"Explore sustainable plumbing fixtures for an eco-friendly home, including emergency plumbing solutions in Manchester. Discover the benefits of green plumbing for a more environmentally conscious lifestyle.",
        "tags":[
            "Eco-Friendly Plumbing",
            "Sustainable Home",
            "Green Plumbing",
            "Emergency Plumbing Manchester"
        ]
    }
]

this is the CardB

<template>
    <div class="flex flex-col w-full h-full gap-5">
        <a :href="`/blog/${blogPath}`">
            <img :src="blog.img" alt="" class="max-w-md md:max-w-lg lg:max-w-2xl rounded-lg">
        </a>
        <div class="flex gap-3">
            <div class="flex gap-1">
                <img width="20" height="20" class="flex items-center"
                    src="https://img.icons8.com/material-rounded/24/0000ff/user.png" alt="user" />
                <p class="font-semibold text-sm text-blue-700 flex items-center">{{ blog.user }}</p>
            </div>
            <div class="flex gap-1">
                <img width="22" height="22"
                    src="https://img.icons8.com/external-tanah-basah-basic-outline-tanah-basah/24/0000ff/external-agenda-strategy-tanah-basah-basic-outline-tanah-basah.png"
                    alt="external-agenda-strategy-tanah-basah-basic-outline-tanah-basah" />
                <p class="font-semibold text-sm text-blue-700 flex items-center">{{ blog.timeCreation }}</p>
            </div>
        </div>
        <h6 class='flex items-start text-lg md:text-xl font-bold'>{{ blog.title }}</h6>
        <p class="max-w-md md:max-w-lg lg:max-w-2xl overflow-hidden whitespace-nowrap overflow-ellipsis">{{ blog.discription }}</p>
        <div class="flex gap-2">
            <p class="text-xs md:text-sm underline text-gray-400 " v-for="tag in blog.tags">{{ tag }}</p>
        </div>
    </div>
</template>
<script setup>
const { blog , blogPath  } = defineProps(['blog','blogPath']);
</script>

after that I create a file index.vue in /components/content/index.vue

<template>
    <div class="grid place-content-center">
        <slot name="image" ></slot>
        <div class="flex gap-2">
            <div class="flex gap-1">
                <slot name="user" ></slot>
            </div>
            <div class="flex gap-1">
                <slot name="agenda" ></slot>
            </div>
        </div>
    </div>
    <div>
        <!-- Content slot -->
        <slot name="content" ></slot>
    </div>
</template>

and I add a markdown file I will add it in the comment my question is how I can access the blog I don't know how to do it and this is in the pages/[...slug].vue

<template>
    <main>
      <ContentDoc />
    </main>
  </template>

the blog is in the pages/blog.vue and all the website is in pages/index.vue