SSR hydration error when using keep-alive in QCarousel

[Evertvdw]

Describe the bug
When using keep-alive in the QCarousel with SSR it results in an hydration error.

Example code:

 <q-carousel
      animated
      :model-value="1"
      arrows
      navigation
      infinite
      keep-alive
      style="width: 400px"
    >
      <q-carousel-slide :name="1" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
      <q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
      <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
      <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" />
    </q-carousel>

To Reproduce
Steps to reproduce the behavior:

1. Create fresh starter project
2. Add above code to Index.vue html.
3. Run quasar SSR mode quasar dev -m ssr
4. See error

Expected behavior
No hydration error

Platform (please complete the following information):
Quasar Version: v2.0.0-rc.3
@quasar/app Version: v3.0.0-rc.3
Quasar mode:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS:
Node:
NPM:
Yarn:
Browsers:
iOS:
Android:
Electron:

Additional context
Add any other context about the problem here.

[rstoenescu]

Hi,

There is a bug in Vue 3 in regards to the keep-alive component which in turn affects us. Haven't had the time to report it yet, but will post the link here once I do it.

[hawkeye64]

vuejs/core#4817

[hawkeye64]

@Evertvdw Can you test again? There have been several SSR/hydration fixes in Vue since this issue was added.

[Evertvdw]

@hawkeye64 Yes, I just did. Issue is still there, the linked issue from the Vue repo is still not resolved either. In any case here is a reproduction link: https://codesandbox.io/s/competent-engelbart-dwfd7?file=/src/pages/Index.vue