Suspense regression when toggling an async component in rc.11

[cexbrayat]

Version

3.0.0-rc.11

Reproduction link

https://jsfiddle.net/eyq3d0mL/

Steps to reproduce

Consider an async component hello mounted via a Suspense like this:

<Suspense>
  <div>
    <button @click="toggled = !toggled">Toggle {{ toggled }}</button>
    <div v-if="toggled">
      <hello />
    </div>
  </div>
  <template #fallback>Loading...</template>
</Suspense>

What is expected?

In rc.10, when clicking on the toggling button, the loading indicator is displayed, then the async component

What is actually happening?

In rc.11, nothing happens

[yyx990803]

Not really a regression - Suspense usage has been reworked. In short, only suspense root node toggles will trigger pending state now. More details in #2099

[cexbrayat]

@yyx990803 Ok thanks, i saw the changes but thought this one would still work.

I still have something weird I think:

<button @click="toggled = !toggled">Toggle {{ toggled }}</button>
<Suspense>
  <div v-if="toggled">
    <hello />
  </div>
  <template #fallback>Loading...</template>
</Suspense>

works, but the loading indicator is not displayed when toggling. Is it expected as well?

See https://jsfiddle.net/7d2zm9xk/