Рекурсия + миксины. Как верно организовать?

Question

[Вячеслав Шевченко]

Всем привет.
Есть компоненты:
1. Element - компонент в котором описан шаблон и исходные данные:

/* Element.vue  */
<template>
    <div class="element__wrap">
        <div class="element">
            <div v-if="isContainer" class="element__inner">
                <NewElement v-for="(item, index) in items" :key="index" :index="index" :type="item.type" :config="item.config" />
            </div>
        </div>
    </div>
</template>

<script>
  import Element from "./NewElement.vue"

  export default {
    name: "Element", 
    components: {
      NewElement
    },
    data() {
       return {
         isContainer: false,
      };
    }
  }
</script>

Обратите внимание, что в шаблоне данного компонента используется другой компонент, который описан далее и который унаследован от данного.

2. ElementContainer - миксин который меняет исходные данные на

/* ElementContainer.vue */
<script>
    export default {
        name: "ElementContainer",
        data: function () {
            return {
                isContainer: true,
            };
        },
    }
</script>

3. NewElement - Новый компонент который объединяет два предыдущих.

/* NewElement.vue */
<script>
    import Vue from "vue";

    /* Components */
    import ElementContainer"./ElementContainer.vue";
    import Element from "./Element.vue";

    export default Vue.extend({
        name: 'NewElement',
        mixins: [Element, ElementContainer]
    });
</script>

Получается что в Element используется NewElement в котором подмешано сам Element. И судя по всему из-за этого ошибка: Cannot read property 'components' of undefined. И если в NewElement.vue написать console.log(Element), то получаю undefined.
Если в Element.vue убрать упоминание NewElement совсем то все работает нормально.