Export rendered html from vue component using javascript

TL;DR: I need to obtain rendered HTML structure as string inside a vue component's function, in order to load that HTML inside an iframe.

I've an App with the following structure:

<template>
  <div>
    <Sidebar />
    <Header />
    <main>
      <iframe></iframe>
    </main>
  </div>
</template>

So, I've multiple components in this project (It's like a component showcase app). I've tried to use <router-view></router-view> instead of an iFrame and everything works perfect. Now, I need to use an <iframe> to load the components in order to resize and the proper viewport is being used inside the iframed component. (Reference web: https://mertjf.github.io/tailblocks/).

If I set the "src" property dinamically of the iframe, the content gets loaded but it renders ALL the webpage again, not only the component I desire.

I've found a solution (probably not the best) that is setting the srcdoc property as the desired HTML, so I can reload everytime I want to swap between components. The problem is that I can't render my existing Vue components into a string and set the new srcdoc value into my iframe...

I've tried using the render function that comes with Vue. I've tried multiple solutions over the forums but no one is giving the "parsed html" from my components.

I've tried to figure out how the Tailblocks page does this, but as it's React I can't really understand what's happening under the hood.

I wanted to do something like that:

<template>
  ...
    <iframe></iframe>
  ...
</template>
<script>
  ...
  methods: {
    renderIframe() {
      var myComp = "GET MY VUE COMPONENT"
      var html = "RENDER THE COMPONENT INTO HTML STRING"
      iframeElement.srcdoc = html
    }
  }
</script>

Thank you to all!