Load vue component into string to use with buefy confirm

Is it possible to load a vue component into a string to be used with buefy confirm?

I've tried the following which is not working:

archiveChannelPrompt () {
  const archiveChannel = document.createElement('template');
  new Vue({
      i18n,
      router,
      render: (h) => h(OArchiveChannel, {
        props: {
          channel: this.channel,
        }
      }),
    }).$mount(archiveChannel);

  this.$buefy.dialog.confirm({
    title: 'Archive Channel',
    message: archiveChannel.outerHTML,
    confirmText: 'Archive',
    onConfirm: () => this.$buefy.toast.open('Archived!')
  });
}

The field message needs to receive a string. That string can contain html. So the problem it seems is I need to load the vue component into a string in javascript so I can pass it along to buefy.

I thought the innerHTML or outerHTML isn't working because the component is not rendered in the DOM, but when I mount the component into the DOM I still get nothing returned.

How can I get around this problem?

Figured it out. A little tweak was needed. Use $mount but don't specify an element to mount to, then within $el you can find the component that you have loaded with all the usual properties available such as innerHTML.

archiveChannelPrompt () {
  const archive = new Vue({
      i18n,
      router,
      render: (h) => h(OArchiveChannel, {
        props: {
          channel: this.channel,
        }
      }),
    }).$mount();

  this.$buefy.dialog.confirm({
    title: 'Archive Channel',
    message: archive.$el?.innerHTML,
    confirmText: 'Archive',
    onConfirm: () => this.$buefy.toast.open('Archived!')
  });
}