我有一个用于Bootstrap Carousel的Vue组件，它具有以下代码：

<template>
    <div :id="id" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div :id="'carousel'+subject.id" v-for="subject,index in subjects" :key="subject.id" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
                <h2>{{ subject.title}}</h2>
                <span>{{ subject.subtitle}}</span>
                <div>{{ subject.html_content}}</div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" :data-bs-target="'#'+id" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" :data-bs-target="'#'+id" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</template>
<script>
export default {
    props: ['id', 'subjects'],
}
</script>

我想知道如何在carousel中显示html字符串（如'<p>some content</p>'）。
我尝试使用DOMParser()和parseFromString()，但这将所有html内容注入到carousel的单个项中，而不是该元素的相应项。
如果解决方案不涉及BootstrapVue，我将不胜感激，因为我使用的是Vue-3。