title: Does Vue 3 Teleport only works to port outside vue?
body: <p>Vue 3 has a new Teleport feature which replaces the portal-vue plugin in vue 2. However, I found that it is impossible to port a component to a place that is controlled by vue (=in the vue app). It only worked when porting outside (body, other elements...).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const app = {
    template: `
    &lt;div&gt;
      &lt;h1&gt;App&lt;/h1&gt;
      &lt;div id="dest"&gt;&lt;/div&gt;
      &lt;comp /&gt;
    &lt;/div&gt;`
  }
  
  
  Vue.createApp(app).component('comp', {
    template: `
    &lt;div&gt;
      A component
      &lt;Teleport to="#dest"&gt;
        Hello From Portal
      &lt;/Teleport&gt;
    &lt;/div&gt;`
  }).mount('#app')</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@3.0.0-rc.9/dist/vue.global.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see, the console even reports, that a teleport target needs to be already rendered. But how can I tell vue which component to render first? In my example, the target is in the dom before the teleport.</p>
  <p>This wasn't a problem in portal-vue and is quite a bummer because it makes the whole concept way less usable.</p>