如何在v-carousel中获取当前项目索引？

<template>
  <v-carousel v-model="currentIndex">
    <v-carousel-item>
      <!-- 内容1 -->
    </v-carousel-item>
    <v-carousel-item>
      <!-- 内容2 -->
    </v-carousel-item>
    <v-carousel-item>
      <!-- 内容3 -->
    </v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0
    };
  }
};
</script>

<template>
  <v-carousel>
    <v-carousel-item>
      <!-- 内容1 -->
    </v-carousel-item>
    <v-carousel-item>
      <!-- 内容2 -->
    </v-carousel-item>
    <v-carousel-item ref="currentItem">
      <!-- 内容3 -->
    </v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
  mounted() {
    const currentIndex = this.$refs.currentItem.index;
    console.log(currentIndex); // 输出当前项目索引
  }
};
</script>