How to use same component instance in multiple places on a page?

[zhengcling]

<page>
  <header />
  <content>
    <left />
    <panel />
  </content>
  <panel />
</page>

When condition A is met, the panel component is displayed under the content component, otherwise it is displayed under the page component.
The current approach is to use appendChild to switch parent components. Is there any other way to ensure that instances can be reused?

[L0st1]

Does it seem like a dialog component？

[illusionno]

You can see the createReusableTemplate method in vueuse，It can define and reuse template inside the component scope。