I'm having issues getting scrolling to work on mobile with vue-fullpage.js and vuetify carousel, it seems that the spacing is scrollable on mobile while any swipes on the carousel appear to be ignored or not picked up.

I'm hoping that someone has experience with this as I've tried scrollOverflow and a number of other things.

Here is a codepen

Here is the structure of my example:

<script type="text/x-template" id="app-template">
  <v-app>
    <v-container fluid fill-height class="black">
      <full-page ref="fullpage" :options="options" id="fullpage">
        <div class="section">
          <div class="wrapper">
            <b></b>
            <v-carousel v-model="model" vertical class="element">
              <v-carousel-item v-for="(color, i) in colors" :key="color">
                <v-sheet :color="color" height="100%" tile>
                  <v-row class="fill-height" align="center" justify="center">
                    <div class="text-h2">
                      Slide {{ i + 1 }}
                    </div>
                  </v-row>
                </v-sheet>
              </v-carousel-item>
            </v-carousel>
            <b></b>
          </div>
        </div>
    
    
        <div class="section">
           <div class="wrapper">
             <b></b>
             <v-carousel v-model="model" class="element">
               <v-carousel-item v-for="(color, i) in colors" :key="color">
                 <v-sheet :color="color" height="100%" tile>
                   <v-row class="fill-height" align="center" justify="center">
                     <div class="text-h2">
                       Second Slide {{ i + 1 }}
                     </div>
                   </v-row>
                 </v-sheet>
               </v-carousel-item>
             </v-carousel>
             <b></b>
           </div>
        </div>
  
      </full-page>
    </v-container>
  </v-app>
</script>

Thanks in advance.