[Bug Report][3.0.0-beta.4] VOverlay SSR hydration errors

Environment

Vuetify Version: 3.0.0-beta.4 Vue Version: 3.2.37 Browsers: Chrome 102.0.0.0 OS: Windows 10

Steps to reproduce

1. Make a component from “https://next.vuetifyjs.com/en/components/overlays/#advanced”
2. Make v-for for cards
3. Hover on card
4. Profit!

Expected Behavior

Hover and overlays work’s fine inside v-for

Actual Behavior

Hover didn’t work, you get errors in console, also overlay didn’t display.

Reproduction

<template>
    <v-row>
        <v-col cols="12" sm="6" md="4" lg="3" v-for="i in 10" :key="i">
            <v-hover v-slot="{ isHovering, props }">
                <v-card class="mx-auto" max-width="344" v-bind="props">
                    <v-img src="https://cdn.vuetifyjs.com/images/cards/forest-art.jpg"></v-img>

                    <v-card-text>
                        <h2 class="text-h6 primary--text">
                            Magento Forests
                        </h2>
                        Travel to the best outdoor experience on planet Earth. A vacation you will never forget!
                    </v-card-text>

                    <v-card-title>
                        <v-rating :value="4" dense color="orange" background-color="orange" hover class="mr-2">
                        </v-rating>
                        <span class="primary--text text-subtitle-2">64 Reviews</span>
                    </v-card-title>

                    <v-overlay :model-value="isHovering" contained scrim="#036358" class="align-center justify-center">
                        <v-btn flat>See more info</v-btn>
                    </v-overlay>
                </v-card>
            </v-hover>
        </v-col>
    </v-row>
</template>

Screenshots

This work’s for one element / card.

This breaks for a few elements in v-for

PS: I a bit sleepy, I make a reproduce link a bit later.

[KaelWD]

The actual bug is this, it has nothing to do with keep-alive or v-for

[magyarb]

Thanks for the fix! In the demo, it looks like it is solved. But if you use layouts and pages in nuxt3, the same problem appears again (and duplicates the buttons next to the v-menu in the toolbar - but also appears when using v-dialog).

@KaelWD could you please reopen this issue until it is fully fixed?

Here is the reproduction link: https://stackblitz.com/edit/node-htkewu