Pagination is not working on Swiper6

<template>
  <div class="posts">
    <div class="post" v-for="(user, key) in userList" :key="key">
      ...
      <div class="post__image">
        <swiper :options="swiperOptions" ref="mySwiper">
          <swiper-slide v-for="(content_image, key) in user.content_images" :key="key">
            <img :src="content_image.image.url" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination" />
        </swiper>
      </div>
      ...
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";

export default Vue.extend({
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  props: {
    userList: {
      type: Array,
      required: true,
    },
  },
  data: function () {
    return {
      swiperOptions: {
        loop: false,
        slidesPerView: 1,
        centeredSlides: true,
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true,
        },
      },
    };
  },
});
</script>