How can I output real markdown/HTML from a yaml in MDC as used in Nuxt 3 Content 2?

Question

I have the following Nuxt 3 Content 2 (N3C2) component:

<template>
    <Reveal>
        <Container padX center padTGrow>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-12 sm:gap-14">
                <div class="lg:col-span-2 order-2 md:order-1">
                    <div class="pb-5 sm:pb-7">
                        <Heading tag="h1" :content="title"/>
                    </div>
                    <div class="prose prose-xl lg:prose-2xl leading-normal lg:leading-snug italic max-w-none">
                        {{ copy }}
                    </div>
                <div  class="mt-9 lg:mt-12">
                    <NuxtLink
                        :to="link.link"
                        class="luna-btn _is-taller text-lg text-gray-600 font-medium">
                        <Icon name="ic:baseline-shopping-basket" size="24" class="mr-3 text-orange-700"/>
                        <span v-text="link.text"/>
                    </NuxtLink>
                </div>
                </div>
                <figure class="md:order-2">
                    <NuxtImg
                        v-if="$mediaType((media.file), 'image')"
                        :src="media.file"
                        :alt="media.text"
                        preset="medium"
                    />
                </figure>
            </div>
        </Container>
    </Reveal>
</template>

<script setup>
const props = defineProps({
    title: { type: String },
    copy: { type: String },
    media: { type: Object },
    link: { type: Object }
})
console.log(props.copy)
</script>

and then I use it as MDC in a markdown file like so, using the yaml format, which is more flexible for me than markdown:

::media
---
title: Welcome to c.food!
copy: |-
    This year, make it your goal to eat food that expires, even quickly, that you can pronounce, that your grandmother wouldn't pass up.

    At c.food, we're proud to be making such food. Thanks to the modern invention of the refrigerator, most of them do keep up to a week. Some even longer! But all of them weird preservatives and funny-sounding chemicals free! Nothing but fresh, refrigerated goodnesses.
media:
    file: images/logo.png
    text: c.food logo
link:
    text: Go to shop
    link: /shop
---
::

If you notice the console.log call to props, the copy actually returns with paragraph break as formatted in the yaml, like so:

"This year, make it your goal to eat food that expires, even quickly, that you can pronounce, that your grandmother wouldn't pass up.

At c.food, we're proud to be making such food. Thanks to the modern invention of the refrigerator, most of them do keep up to a week. Some even longer! But all of them weird preservatives and funny-sounding chemicals free! Nothing but fresh, refrigerated goodnesses."

However, inside of the template where I need it so, it's just a single line string. I'm not sure I know how to get it to be proper HTML/MD with ContentSlot not working or I'm tripping over the use slot parameter for that. Kindly provide some help/direction. Thanks.

{{ copy }} returns one-line string of copy

<slot :name="copy"/> is blank, I may not be doing this right.

<ContentSlot :use="$slots.copy" unwrap="p" /> blank, clearly T&E, dunno what I'm doing.