Vue2 Swiper6 设置后不出小圆点问题

<template>
    <swiper
    :slides-per-view="10"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    :options="swiperOptions"
    >
        <swiper-slide class="swiper-slide">
            <div class="gat_me_top">
                <div class="blue_1"><div><span>态势综合指挥系统</span></div></div>
                <div class="blue_2"><div><span>预案管理系统</span></div></div>
                <div class="blue_3"><div><span>装备管理系统</span></div></div>
                <div class="blue_4"><div><span>社会监控管理系统</span></div></div>
            </div>
            <div class="gat_me_top">
                <div class="green_1"><div><span>关注人员系统</span></div></div>
                <div class="green_2"><div><span>视频智能调度</span></div></div>
                <div class="green_3"><div><span>态势可视化大屏</span></div></div>
            </div>
        </swiper-slide>
        <swiper-slide class="swiper-slide">Slide 2</swiper-slide>
        <swiper-slide class="swiper-slide">Slide 3</swiper-slide>
        <swiper-slide class="swiper-slide">Slide 4</swiper-slide>
        <swiper-slide class="swiper-slide">Slide 5</swiper-slide>
        <swiper-slide class="swiper-slide">Slide 6</swiper-slide>
        <swiper-slide class="swiper-slide">Slide 7</swiper-slide>
        <swiper-slide class="swiper-slide">Slide 8</swiper-slide>
        <swiper-slide class="swiper-slide">Slide 9</swiper-slide>
        <swiper-slide class="swiper-slide">Slide 10</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>
<script>
import {Swiper,SwiperSlide,directive } from 'vue-awesome-swiper';
import SwiperCore, { Navigation, Pagination} from 'swiper/core'; //引入
import 'swiper/swiper-bundle.css';//样式地址与之前有不同
SwiperCore.use([Navigation, Pagination]); // 使用
export default {
    name:"Topswiper",
    components: {
      Swiper,
      SwiperSlide
      },
      //全局引入可以不用
      directive:{
        swiper: directive
      },
    data () {
        return {
            swiperOptions:{
                pagination: {
                el: '.swiper-pagination'
              },
            }
        }
    },
    mounted() {},
    methods:{
       onSwiper(swiper) {
        console.log(swiper);
      },
       onSlideChange() {
        console.log('slide change');
      },
    }
}
</script>

npm install swiper vue-awesome-swiper --save

Swiper中文网

怕忘记随手记一下