Strange teleport behavior

[rik43]

Version

3.0

Reproduction link

https://codepen.io/rik43/pen/PoZLyqQ

Steps to reproduce

  <div id="app" class="demo">
    <div class="cell cell1"></div>  <!-- Works -->

    <div>
      <teleport to=".cell1">test 1</teleport>
      <teleport to=".cell2">test 2</teleport>
      <teleport to=".cell3">test 3</teleport>
    </div>
    
    <div class="cell cell2"></div>  <!-- NOT Works -->
  </div>
  
  <div class="cell cell3"></div>  <!-- Works -->

Why?

What is expected?

works in all cases

What is actually happening?

not work on test 2

[posva]

Please check the console log:

[Vue warn]: Failed to locate Teleport target with selector ".cell2". Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree. 
  at <App>

only the last portal target is valid in your reproduction