Recursion + mixins. How to properly organize?

Question

Vue.js

Hello.
There are components:
1. Element - a component in which the template and initial data are described:

/* 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>

Note that this component's template uses another component, which is described below and which is inherited from this one.
2. ElementContainer - a mixin that changes the original data to

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

3. NewElement - A new component that combines the two previous ones.

/* 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>

It turns out that Element uses NewElement in which Element itself is mixed. And apparently because of this error: Cannot read property 'components' of undefined. And if I write in NewElement.vue console.log(Element), then I get undefined.
If you remove the mention of NewElement in Element.vue completely, then everything works fine.