Render a custom component as region content

[gilad7]

Hi, I am trying to render a custom region which I want to be as a standalone vue component. I am able to use custom content when creating it dynamically:

const regions = RegionsPlugin.create();

const customElement = document.createElement("div");
customElement.style.width = "100px";
customElement.textContent = (region.content as string) || "Custom Content";

regions.addRegion({
      start: region.start,
      id: region.cssId,
      content: customElement,
    });

However, I wish to have a seperate component in a .vue file that I can put in the content and also I might want to send some props to it, like so:

AudioTimestampStyledComponent.vue

<template>
    <div>
      <span>{{ time }}</span>
    </div>
  </template>
  
  <script setup lang="ts">
  defineProps<{
    time: number
  }>()
  </script>
  

How can I render this component in the region content?

Many thanks! awesome library :)