v-carouselで画像のボタンが左右に配置されない

Question

前提・実現したいこと

プログラミング初心者です。
Vue.jsでWebページを作成しています。
Vuetifyで画像のカルーセルを作成しようとしていますが、
左右に配置されるはずのnextボタンとprevボタンが左に重なった状態で表示されます。
ボタンを押すと次の画像に進み、前の画像に戻ることはできません。
（＞のボタンを押した時の挙動です）

ボタンを左右に配置し、前後の画像へ表示を切り替えられるようにしたいと考えております。

発生している問題・エラーメッセージ

エラーメッセージなし

該当のソースコード

<template>
  <div class="HogeContents">
    <v-carousel>
      <v-carousel-item v-for="item in HogeItems" :key="item.id" :src="item.path"> </v-carousel-item>
      
    </v-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      HogeItems: [
        {
          id: 1,
          path: require('../../../assets/images/demo/sample1.jpg')
        },
        {
          id: 2,
          path: require('../../../assets/images/demo/sample2.jpg')
        },
        {
          id: 3,
          path: require('../../../assets/images/demo/sample3.jpg')
        },
        {
          id: 4,
          path: require('../../../assets/images/demo/sample4.jpg')
        },
        {
          id: 5,
          path: require('../../../assets/images/demo/sample5.jpg')
        },
        {
          id: 6,
          path: require('../../../assets/images/demo/sample6.jpg')
        },
        {
          id: 7,
          path: require('../../../assets/images/demo/sample7.jpg')
        },
        {
          id: 8,
          path: require('../../../assets/images/demo/sample8.jpg')
        },
        {
          id: 9,
          path: require('../../../assets/images/demo/sample9.jpg')
        },
        {
          id: 10,
          path: require('../../../assets/images/demo/sample10.jpg')
        }
      ]
    };
  }
};
</script>

<style scoped></style>

試したこと

https://vuetifyjs.com/ja/components/carousels/
Vutify公式ページにあるサンプルコードを試してみましたがボタンの位置は変わりませんでした。

補足情報（FW/ツールのバージョンなど）

vueのバージョンは2.6.14です。

Comments

[webgoto]

おそらくcssの問題だと思いますのでcssを記載された方が解決につながるのではないでしょうか。

[wkwkrn]

ご提案くださりありがとうございます。
cssに以下を追記してみましたが変化がありませんでした・・・

.v-window__prev {
left: 0;
}
.v-window__next {
right: 0;
}

Answer 1

公式サイトのcodePenで色々触ってみたのですが、v-appタグで囲わないと駄目なようですね。

https://codepen.io/pen/?editors=1010

<v-app>
 <v-carousel>
      <v-carousel-item v-for="item in HogeItems" :key="item.id" :src="item.path"> </v-carousel-item>
 </v-carousel>
</v-app>

Comments

[wkwkrn]

記載いただいたとおりにv-appタグで囲ってみたところ、ボタンが左右に配置されました。
動作も問題ないようです。
ご教示いただきありがとうございました！