Css – Child component template contents does not show up when hosted in the parent component

I am using Vue3 with options api as shown in the code posted below. I have a child component and it is hosted in the parent component as shown below.

The problem is, at run time, despite the showNotificationsWindowsContainer is set to true, the NotificationsWindowsContainer.vue does not show up.
To solve this issue, I enclosed the <NotificationsWindowsContainer> in the parent component within a <div> with an id, then, at runtime, the NotificationsWindowsContainer.vue showed up.
But I do not want to wrap the <NotificationsWindowsContainer> in the parent component around a <div>

I want the parent component to host the child component as in the way shown in my code below.

My question is, why the code of parent component shown below can not show the contents of <NotificationsWindowsContainer>

child component

<template>
    <div id="idDivNotificationsWindowsContainer" v-show="showNotificationsWindowsContainer">
    </div>
</template>

<script>
export default {
    name: 'NotificationsWindowsContainer',
    data() {
        return {
        };
    },
    components: {},
    props: {
        showNotificationsWindowsContainer: {
            type: Boolean,
            default: true,
        },
    },
    computed: {},
    methods: {},
};
</script>

<style>
    @import '../../../map/assets/css/NDVIComparisonTab/Notifications/NotificationsWindowsContainer.css';
</style>

parent component:

<template>
    <NotificationsWindowsContainer
        v-bind:showNotificationsWindowsContainer="showNotificationsWindowsContainer"
    ></NotificationsWindowsContainer>
</template>

<script>
    export default {
    name: 'NDVIComparisonGUI',
    data() {
        return {
            showNotificationsWindowsContainer: true,
....
....
....

css of the child component:

#idDivNotificationsWindowsContainer{
    position: absolute;
    width: 500px;
    height: 500px;
    z-index: 1;
    background-color: chartreuse;
}

mentioned in the question