Vue-awesome-swiper的点不出现？

Question

<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
        <!-- slides -->
            <swiper-slide>
                <img class="swiper-image" src="https://userimg.qunarzz.com/imgs/201605/15/66I5P2-jg3LCvIjm6480.jpg">
            </swiper-slide>
            <swiper-slide>
                <img class="swiper-image" src="https://userimg.qunarzz.com/imgs/201607/09/66I5P2-aFpm1ja7-6480.jpg">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
export default {
    name:'HomeSwiper',
    data () {
        return {
            swiperOption:{
                pagination: {
                    el: '.swiper-pagination'
                }
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
    .wrapper
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 31.25% 
        background: #eee
        .swiper-image
            width: 100%
</style>

Answer 1

<div class="swiper-pagination">
  <span v-for="index in total" :key="index">
  </span>
</div>