求助老师~不能显示滚动条

感觉看视频都看懂了的，自己尝试写一个试试滚动条时，却不能实现，可以麻烦老师看看吗？

<template>
  <div class="page">
    <swiper :options="swiperOption">
      <swiper-slide>
        <div class="test">
          文字<br>文字<br>文字<br>文字<br>文字<br>
          文字<br>文字<br>文字<br>文字<br>文字<br>
          文字<br>文字<br>文字<br>文字<br>文字<br>
          文字<br>文字<br>文字<br>文字<br>文字<br>
        </div>
      </swiper-slide>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
  </div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper';
export default {
  data() {
    return {
      swiperOption: {
        direction: "vertical",
        slidesPerview: "auto",
        freeMode: true,
        setWrapperSize: true,
        scrollbar: {
          el: ".swiper-scrollbar",
          hide: true
        }
      }
    };
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<style scoped>
  .page {
    width: 100%;
    height: 100%;
    border: 1px solid red;
  }
  .test {
    width: 100%;
    height: 500px;
  }
</style>