vue.js dynamic component renders twice with itself as child component

Question

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.

<template>
  <component v-if="getInstanceName" :is="getInstanceName" :data="data" />
</template>

<script>
import WidgetTypes from './WidgetTypes'
import { hydrateWhenVisible } from 'vue-lazy-hydration'

const components = Object.keys(WidgetTypes.types).reduce(
  (components, typeKey) => {
    const type = WidgetTypes.types[typeKey]
    components[type] = hydrateWhenVisible(
      () =>
        import(
          /* webpackChunkName: "[request]" */
          /* webpackMode: "lazy" */
          `./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)
    }
  }
}
</script>

All this works like a charm.. except ;-)

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.

Any help appreciated thanks