How do I wait for slot content to render?

Hi I don't know what to call this problem, or if it's supposed to be like that for a reason.. but is there any way for me to wait for slot content to render?

Basically I have a component which I want to know whenever it is scrollable or not, the content of the outer wrapper #bit-box is being rendered through a vue slot...

The problem is the isScrollable function always returns false, even tho it has overflow and is scrollable when the page is fully rendered... If I run the same function isScrollable in the console when everything is loaded it will return true...

The content I put into the slot is available directly from the controller in the beginning of the page load, no ajax or anything funky to load the slot data.

Scroll Function

export function isScrollable(ele){
    return ele.scrollHeight > ele.clientHeight;
}

Component (BitBox)

const bitBox = shallowRef<HTMLDivElement>();

onMounted((): void => {
    if (typeof bitBox.value === 'undefined'){
        return;
    }

    document.addEventListener('DOMContentLoaded', function () {
        // This actually never triggers
        alert('WE ARE READY');
    });

    if(isScrollable(bitBox.value)){
        alert('Scrollable Yeeeah 1');
    } else {
        alert('Scrollable Naaah 1');
    }

    if(isScrollable(document.getElementById('bit-box'))){
        alert('Scrollable Yeeeah 2');
    } else {
        alert('Scrollable Naaah 2');
    }
});

<template>
    <div
        ref="bitBox"
        id="bit-box"
    >
        <slot name="content"></slot>
    </div>
</template>

Some random component that uses the BitBox

<template>
<BitBox>
    <template #content>
        <p v-for="someData in dataset" :key="someData">
            {someData.title}
        </p>
    </template>
</BitBox>
</template>

It is frustrating because the isScrollable function works, but it looks like it triggers before the data is there.