Cannot read properties of undefined (reading 'clientWidth') on vuetify3 slider group component

Question

I'm using vuetify3 for my front application. I want to have a slider with small picture that permit to select images like that :

the code doing it well but when i click on one of a small picture, an error appears :

helpers.mjs:36 Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth')
    at calculateCenteredOffset (helpers.mjs:36:1)
    at eval (VSlideGroup.mjs:102:1).

this is the code of the slider concerned :

<v-slide-group show-arrows center-active mandatory class="background-white justify-center">
        <v-row justify="center" align="center" >
          <v-slide-group-item v-for="productVariant in productCard.variantsFiltered" :key="productVariant"  v-slot="{ isSelected, toggle }">
            <v-card :class="['ma-3', selectedClass]" height="52" width="50" @click="toggle">
              <div class="flex-column fill-height align-center ">
                <div class="cover">
                  <v-img height="50" rounded @click="changeSrc(productVariant)"
                  :src="productVariant.imagesURL[0]"></v-img>
                </div>
                <v-scale-transition>
                  <div class="selected-color" v-if="isSelected"></div>
                </v-scale-transition>
              </div>
            </v-card>
          </v-slide-group-item>
        </v-row>
      </v-slide-group>

this is my first post, i will try to do my best to explain and give some clues to find a solution

I tried to explain the problem to chatGPT, i try some modification, but i don't find a solution

Answer 1

It seems to work when I remove the v-row between v-slide-group and v-slide-group-item. Have a look at the playground

---

playground with centering