Vuetifyのcarouselでボタンの位置がズレる！
本当は矢印のボタンが左右に分配されてよくある感じになって欲しい
そのときのVueコンポーネント
<template>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
reverse-transition="fade-transition"
transition="fade-transition"
></v-carousel-item>
</v-carousel>
</template>
これは公式の Source Code をコピーして使っていた。
解決策
UI コンポーネントは基本\<v-app>で囲まないといけないっぽい（参考）
囲まないと型崩れすることがあるっぽいけど、こんなこと公式に書いてある？？ （一応公式も Codepen の方は v-app で囲んであったが....）
上手く行ったときの画像とコードはこんな感じ
<template>
<v-app>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
reverse-transition="fade-transition"
transition="fade-transition"
></v-carousel-item>
</v-carousel>
</v-app>
</template>
-> Codepenにあるように、\<v-app>で囲むとうまく表示される
