I come with a quick questions for you guys, I’ve one component who can receive many child (as slots). the problem comes when some of these childs are async (using suspense). My component apply some transformation, but when an async child enter, my component doesn’t apply the respective transformations because the data is not loaded yet.

    <EdgeSplit :angle="Math.PI * 2">
 // This work fine
      <TresMesh name="green" :scale="0.5" :position-x="2">
        <TresIcosahedronGeometry :args="[1, 3]" />
        <TresMeshStandardMaterial :color="0x00FF00" />
      </TresMesh>
// This don't because is not loaded yet
      <Suspense>
        <Headphones :scale="0.25" :position-y="-2" />
      </Suspense>
    </EdgeSplit>

Is not a DOM element so mutationObserve will not work

If I put a setTimeout it works but obviusly I don’t want that, do you know how to indicated my EdgeSplit component to “wait” until all the child are loaded?

Some of my EdgeSplit

if (slots.default) {
  slots.default().forEach((slot) => {
    if (slot.type.name === 'Suspense') {
      // Search for a method when the suspense is resolved
      setTimeout(() => {
        applyModifier(wrapperRef.value)
      }, 1000)
    }
    else {
      applyModifier(wrapperRef.value)
    }
  })
}