[Vue]Break lines is deleted, when using a slot

I'm creating a component and snippet list, so that my team member can copy the codes.
But I have a problem.
Break lines of the outrerHtml/innerHTML is deleted, when using a slot

<div id="app">
    <component>
        <section class="card">
            <img class="card-img" src="https://dummyimage.com/600x400/000/fff" alt="">
            <div class="card-content">
                <h1 class="card-title">Title</h1>
                <p class="card-text">Lorem ipsum dolor sit amet,</p>
            </div>
            <div class="card-link">
                <a href="#">Link1</a>
                <a href="#">Link2</a>
            </div>
        </section>
    </component>
</div>


<script type="text/x-template" id="component">
<div class="component">
    <div style="display: none;"><slot></slot></div>
    <div class="slot" v-html="code"></div>
    <pre class="highlight"><button @click="copy" class="btn-copy">COPY</button><code v-html="highlightedCode"></code></pre>
</div>
</script>



<script>
    const app = Vue.createApp({})
    app.component('component', {
        template: '#component',
    })
    app.mount('#app')
</script>

This code turned into ...

<section class="card"><img class="card-img" src="https://dummyimage.com/600x400/000/fff" alt=""><div class="card-content"><h1 class="card-title">Title</h1><p class="card-text">Lorem ipsum dolor sit amet,</p></div><div class="card-link"><a href="#">Link1</a><a href="#">Link2</a></div></section>

I expect like this..

<section class="card">
    <img class="card-img" src="https://dummyimage.com/600x400/000/fff" alt="">
    <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="card-text">Lorem ipsum dolor sit amet,</p>
    </div>
    <div class="card-link">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
    </div>
</section>

To avoid this problem, I added pre tag inside of the component tag

<component><pre>
    <section class="card">
        ~~~~ foo bar ~~~~
    </section>
</pre></component>

This works.
But the pre tag is redundant.
You know. I want to reduce it.
I would be happy if I can get the original html that including break line without <pre>.

so, How should I do?
Thank you in advance

Code

ComponentInventory(without pre)

https://codepen.io/jevouslue/pen/zYjqqZq

ComponentInventory(with pre)

https://codepen.io/jevouslue/pen/VwxaLxQ

I would be happy if I can get the original html that including break line without .