vuetify: [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.