Suspense + out-in Transition renderes component out of order

[manniL]

Vue version

since 3.3.10 (3.4.5)

Link to minimal reproduction

https://play.vuejs.org/#eNqNU01v2zAM/SuEL06BxM6Q7uIlXdehh+2wDm2Pvrg2k6iVJUGinRZB/vsoKd/bip5sPvGRj4/SOvlmTNZ3mBTJ1NVWGAKH1JmrUonWaEuwBrespNSre5wPYQkbmFvdQsqk9EupSlVr5QjuFMIMBhcwu4LlIG1Enw6ZW8vKuQJSQkcpbIaQaoXpxY71uNIfY9FKe9aO1wtcMfGgbMD991VrKeqXfd11qSAQsr6SnVd5HMxmQfrXIKXw/6XalGqaRzfYBw4IWyMrQo4Apqzy6lGbae5/AkK2Uk6Q0ApU1eKsTEy1wDKBVjc+0h2NhOK4aDpb+TwGJ+NxmQQ+V3jonEHlYoeA1Jr9V6gICuE43YvmCvmOkZ9QpvlBw0HljSbS7ZHQp44BBaLhgqQXC4k35HVdB8sYDF+WFROnefwymRscTODQ0Zv0v5mfdMQy0Y6qmkSPwx0osepxC8YtHDQWwJuDcXbp+A6x36eF/A07K0M6ltCmqgW9FTBmIsBcSCYU8CQ7O/hksb2I9Xh/W4HJMIk3edRWJnt2WvFdD6XK7YErkyIW9xjfax+XyZLIuCLP60YxrUEpepsppFyZNr/mtNx2ikSLo0a315PsMvvMRjs6hjN07ejJ6pVDy0XKhKfat8kZ7Hlai6pBi/ajbc9ox63Pjv5q77uzOxs2hRw/lrlYnFnir52QaO+MX9OpNeGx/QwY2c4vOuL1EuuXf+DP7jXO9NtiUHY0P1V2gRSPbx9+4Sv/7w/52XRyu4b/HN6j07LzGmPaTacaln2UF9T+CBsWavHobl+Jn8tuKC80uBHywz6+vzP6Qe4km+xd3PwBEinCwg==

Steps to reproduce

1. Click on the button
2. See that component is not replaced but rendered below all the other components

What is expected?

The component should be replaced in-place when the transition is triggered.

What is actually happening?

The component is rendered below, out of order

System Info

 System:
    OS: macOS 13.5.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 110.55 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.0 - /opt/homebrew/bin/npm
    pnpm: 8.5.0 - ~/Library/pnpm/pnpm
    bun: 1.0.21 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 119.0.6045.105
    Safari: 16.6

Repro in SFC Playground using macOS Firefox Dev Edition 122.0b3

Any additional comments?

As a workaround, wrapping a div around the transition works fine and replaces the component as expected. Using in-out (without a wrapper div) also works.

Possibly related issues and PRs: #9309, #9769, #9770