Currently I have to implement a carousel using VuetiFy and VueJS, but I need to set the default image on to be different that the first element of the array, and it depends on certain conditions.

In particular, I have a Comment model (some piece of information) related to one element of the Slide Model (the model that contains the image). This slide is also related by other element to other slides. So, when I need to see one comment in particular, I have to show its corresponding slide and all the slides parented to that one in order, but showing as default (or initial slide) the one that is directly related.

For example, the comment N is related to the slide number 7 of an array of 12 slides. So, in the carousel, the 12 slides should be presented, but the focus at the beginning should be on the slide number 7.

In the component I have something like this:

<script setup lang="ts">
import { isNullOrUndefined } from '@core/utils/index'
import API_MEDIA_URL from '@/plugins/media_url'
import api from '@axios'
...
const props = defineProps(['comments', 'evalmode'])

const openedPanels = ref<number[]>([])
const slides = ref()

onMounted(() => {
  openedPanels.value = [0]

  api.get(`comment/slides/${props.comments[0].id}`).then(response => {
    slides.value = response.data
  })
})

watch(props, (newQ) => {
  openedPanels.value = [0]
})
</script>

<template>
...
<VExpansionPanels
  v-if="!isNullOrUndefined(slides) && 
    !isNullOrUndefined(props.comments)"
  multiple 
  v-model="openedPanels"
  >
  <VExpansionPanel
    v-for="comment in props.comments"
    :key="comment.id"
    v-model="openedPanels"
    >
      <v-row>
        <v-col>
          <v-card-actions class="justify-center">
            <v-carousel hide-delimiters :progress="true">
              <v-carousel-item
                v-for="(slide,i) in slides"
                  :key="i"
                  :src="API_MEDIA_URL+slide.src"
                  cover
                  ></v-carousel-item>
            </v-carousel>
          </v-card-actions>
        </v-col>
      </v-row>
  </VExpansionPanel>
</VExpansionPanels>
...
</template>

>Solution :

v-model property should match your needs.
If you want the 7th slide be focus on initial, then you can set the value activeIndex = 6

<v-carousel v-model="activeIndex">    
      <v-carousel-item
          v-for="image in images"
          :key="image.path"
          :src="image.signedUrl"
          class="overflow-auto"
          contain
        ></v-carousel-item>
</v-carousel>