Recursively Nested Components with VueJS

I'm trying to set up a parent-child hierarchy here are the relevant component definitions - I've simplified them to just show the structure of the hierarchy.

RootComponent.vue

<template>
    <ComponentA></ComponentA>
</template>

ComponentA.vue

<template>
    <!--...-->
    <ComponentB></ComponentB>
</template>

ComponentB.vue

<template>
    <!--Some standard html tags-->
    <ComponentA></ComponentA>
    <!--...-->
    <ComponentC></ComponentC>
</template>

ComponentC.vue

<template>
    <!--Some standard HTML tags-->
    <ComponentD></ComponentD>
</template>

The problem is that ComponentA within ComponentB is not rendered and the following error message is displayed in the console:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

The top-level instance of ComponentA and ComponentB render correctly it is only the nested ComponentA one level down that does not render.

All of the components are created using the Vue.extend() method and have a name property defined on them. The components are imported by a components: property

ComponentA imports ComponentB

ComponentB imports ComponentA and ComponentC

Edit

Component A Importing

import ComponentB from "./ComponentB.vue"
export default Vue.extend({
    name: "ComponentA",
    //...
    components: {
        ComponentB
    }
})

Component B Importing

import ComponentA from "./ComponentA.vue"
import ComponentC from "./ComponentC.vue"
export default Vue.extend({
    name: "ComponentB",
    //...
    components: {
        ComponentA,
        ComponentC
    }
})

Expected HTML Structure Rendered

<ComponentA>
    <ComponentB>
        <ComponentA>
            <ComponentB>
                <ComponentC></ComponentC>
            </ComponentB>
        </ComponentA>
        <ComponentC></ComponentC>
    </ComponentB>
</ComponentA>

Actual HTML Structure Rendered

<ComponentA>
    <ComponentB>
        <!--ComponentA is missing here-->
        <ComponentC></ComponentC>
    </ComponentB>
</ComponentA>

I've spent hours searching online for solutions but can't find any that solve the issue. Any pointers are greatly appreciated.