title: vue.js dynamic component renders twice with itself as child component
body: <p>I have a component proxy which renders components using vue.js build in dynamic component. The instanceName is the component to render. The data is the relevant data for the component to render.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;component v-if=&quot;getInstanceName&quot; :is=&quot;getInstanceName&quot; :data=&quot;data&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import WidgetTypes from './WidgetTypes'
  import { hydrateWhenVisible } from 'vue-lazy-hydration'
  
  const components = Object.keys(WidgetTypes.types).reduce(
    (components, typeKey) =&gt; {
      const type = WidgetTypes.types[typeKey]
      components[type] = hydrateWhenVisible(
        () =&gt;
          import(
            /* webpackChunkName: &quot;[request]&quot; */
            /* webpackMode: &quot;lazy&quot; */
            `./dynamic/${type}/${type}.vue`
          ),
        { observerOptions: { rootMargin: '100px' } }
      )
      return components
    },
    {}
  )
  
  export default {
    name: 'WidgetComponentProxy',
    components: components,
    props: {
      data: {
        type: Object,
        required: true,
        default: null
      }
    },
    computed: {
      getInstanceName() {
        return WidgetTypes.getInstanceName(this.data.instance_type)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>All this works like a charm.. except ;-)</p>
  <p>When inspecting in vue.js devtools I see my component twice. The component is somehow child to itself. I sometimes get errors trying to render components using this proxy.
  <a href="https://i.stack.imgur.com/BaBZr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BaBZr.png" alt="enter image description here" /></a></p>
  <p>Any help appreciated thanks</p>