Vuetifyのカルーセル実装

export interface CarouselPerson {
  name: string
  imagePath: string
  comments: string

//union型
  star: 1 | 2 | 3 | 4 | 5
}

const client_1: CarouselPerson = {
  name: '大変素晴らしいアプリだと思います',
  comments:
    '大変素晴らしいアプリだと思います。i os の更新でたまに長期間使用不能（事業で使う方には致命傷）になるので☆一個減点です。',
  imagePath: require('@/assets/images/client/01.jpg'),
  star: 4,
}

export default class HomeFrontCarouselsComponent extends Vue {
  data() {
    return {
      carouselPersons: [client_1, client_2, client_3],

//カルーセルの番号
      model: 0,
    }
  }
}

//model はカルーセルの番号
<v-carousel v-model="model">
      <v-carousel-item

//先程の配列
        v-for="(person, i) in carouselPersons"

//一意に決まるもの
        :key="i"
      >
        <v-sheet
          :person="person"
          height="100%"
          tile
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
            style="flex-direction: column;"
          >

//親要素のv-avatarで画像のサイズを決める
            <v-avatar
              class="mb-10"
              height="100"
              width="100"
            >
              <v-img
                width="100%"
                :aspect-ratio="1/1"
                :src="person.imagePath"
                style="object-fit: fill;"
              />
            </v-avatar>

            <div class="mb-7">{{person.comments}}</div>
            <v-rating
              class="mb-7"
              color="warning"
              length="5"
              small
              readonly
              :value="person.star"
            ></v-rating>

            <div>{{person.name}}</div>
          </v-row>
        </v-sheet>
      </v-carousel-item>
    </v-carousel>