I am using a dialog vue component to load a partial (blade view) to show as the content of the dialog. This works fine except when I start adding a vue component inside that partial view.

In Dialog.vue I use theses methods for loading a partial:

 loadPartial() {
        axios.get('/dialogs/' + this.partial).then(response => {
            this.html = response.data;

        }).catch(error => {
            console.error(error);
        })
    }

computed: {
    htmlText() {
        return `${this.html}`;
    }
}

Inside <template> there is this to catch the partial’s content:

 <div v-html="htmlText" class="l-dialog__content">
 </div>

The partial is called from a blade view with for example:

<hh-dialog placeholder="{{ __('Loading...') }}" partial="close-advertisement">
    <template v-slot:activator="{ onClick }">
        <a @click="onClick" class="m-button" href="javascript:">
             <i class="m-button__icon fa fa-trash"></i>
         </a>
    </template>
</hh-dialog>

The problem is that when the partial (in this case close-advertisement.blade.php) has a Vue component inside of it. It won’t render.

So inside my partial this bit won’t render:

<div class="mb-2">
   <hh-reason-picker action="advertisement.close"></hh-reason-picker>
 </div>

So. How do I render a Vue component that is inside a dialog’s partial, loaded with a get request?