在vuejs里使用vue-awesome-swiper.js swiper-pagination出不来

Question

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide>
        <img
          class="img-swiper"
          src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20201/8216fd250c35366befc35f6353f934b9.jpg_890x330_9062b3ba.jpg"
          alt
        />
      </swiper-slide>
      <swiper-slide>
        <img
          class="img-swiper"
          src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20201/86ca4dc2777b997607e97eb8471dcafd.jpg_890x330_0eee7728.jpg"
          alt
        />
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HomeSwiper",
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        loop: true
      }
    };
  }
};
</script>
<style lang="stylus" scoped>
// .wrapper >>> .img
.wrapper
    overflow hidden;
    width 100%;
    height 0px;
    padding-bottom 37%;
    background #eee;
    .img-swiper
      width 100%;
      overflow hidden;
      // object-fit:cover;
      // height 200px;

Answer 1

pagination: {
    el: '.swiper-pagination'
},