VueJs: слот для компонента как свойство

Я прочитал документацию и не уверен, что то, чего я пытаюсь достичь, действительно выполнимо. То, что мне нужно, - это свойство компонента, которое содержит теги html, которые, очевидно, создают недопустимый html - поэтому мне было интересно, есть ли способ передать html в компонент и отправить его дальше с испускаемым событием. Наиболее подходящим способом было бы иметь named slot, но я не думаю, что могу связать содержимое именованного слота с внутренним свойством.

Компонент, над которым я работаю, - это простой диалог подтверждения. Компонент триггера будет заключать в оболочку два слота - один для метки, а другой для сообщения, которое я хотел бы отправить вместе с событием в компонент диалога.

Мой компонент триггера на данный момент выглядит так:

<template>
    <a :class="cssClass" @click="clicked()">
        <slot></slot>
    </a>
</template>
<script>
    export default {
        props: {
            id: {
                type: String,
                required: true
            },
            route: {
                type: String,
                required: true
            },
            message: {
                type: String,
                required: true
            },
            cssClass: {
                type: String,
                required: false
            }
        },
        mounted() {
            window.EventHandler.listen('confirm-dialog-' + this.id + '-called', () => {
                window.location.reload(true);
            });
        },
        methods: {
            clicked() {
                window.EventHandler.fire('top-confirm', {
                    id: 'confirm-dialog-' + this.id,
                    message: this.message,
                    url: this.route
                });
            }
        }
    };
</script>

и при добавлении в html:

<call-dialog
    route="{{ route('subscriber.destroy', $subscriber->id) }}"
    css-class="alert"
    id="{{ $subscriber->id }}"
    message="Are you sure you wish to remove '{{ $subscriber->email }}'?<br />There is no undo!"
>
   <i class="fa fa-trash"></i> Remove
</call-dialog>

Как видите, в настоящий момент я передаю сообщение, используя message prop, но этот конкретный содержит тег <br />, который создает недопустимый html.

Есть идеи, как с этим справиться?

ПРИМЕЧАНИЕ

Думаю, я нашел способ сделать это с именованными слотами:

<template>
    <a :class="cssClass" @click.prevent="clicked()">
        <slot name="label"></slot>
    </a>
</template>
<script>
    export default {
        props: {
            id: {
                type: String,
                required: true
            },
            route: {
                type: String,
                required: true
            },
            cssClass: {
                type: String,
                required: false
            }
        },
        mounted() {
            window.EventHandler.listen('confirm-dialog-' + this.id + '-called', () => {
                window.location.reload(true);
            });
        },
        methods: {
            message() {
                 return this.$slots.message[0].context.message;
            },
            clicked() {
                window.EventHandler.fire('top-confirm', {
                    id: 'confirm-dialog-' + this.id,
                    message: this.message(),
                    url: this.route
                });
            }
        }
    };
</script>

А теперь просто переходящий и дополнительный именованный слот slot="message"

<call-dialog
    route="{{ route('subscriber.destroy', $subscriber->id) }}"
    css-class="alert"
    id="{{ $subscriber->id }}"
>
    <span slot="label"><i class="fa fa-trash"></i></span>
    <span slot="message">Are you sure you wish to remove '{{ $subscriber->email }}'?<br />There is no undo!</span>
</call-dialog>