Vue 3 Components inside Component

Basically.. I have the code below and I want both components (a-comp and b-comp) to show up on the "main" component (my-component).

My CodePen try: https://codepen.io/azmvth/pen/vYqdojq

const app = Vue.createApp({
    components: {
        'my-component': {
            template: `
            <div>
                <a-comp />
                ↑ A COMPONENT MUST SHOW UP ABOVE<br>
                ↓ B COMPONENT MUST SHOW UP BELOW
                <b-comp />
            </div>`
        },

        'a-comp': {
            template: `
            <div>
                AAAAAAAAAAAAAA
            </div>`
        },

        'b-comp': {
            template: `
            <div>
                BBBBBBBBBBBBBB
            </div>`
        }
    }
}).mount('body')

To begin with, the main component must have both components A and B in its own components property Maybe this will help you. => https://codepen.io/Dimitar-Georgiev-the-flexboxer/pen/RwzMrgO

const app = Vue.createApp({
    components: {
        'my-component': {
            template: `
            <div>
                <a-comp />
                ↑ A COMPONENT MUST SHOW UP ABOVE<br>
                ↓ B COMPONENT MUST SHOW UP BELOW
                <b-comp />
            </div>`,
            components: {
                'a-comp': {
                    template: `
                    <div>
                        AAAAAAAAAAAAAA
                    </div>`
                },
                'b-comp': {
                    template: `
                    <div>
                        BBBBBBBBBBBBBB
                    </div>`
                }
            }
        },
        
    }
}).mount('body')

Best Regards