vue3 swiper 그랩 슬라이드

<template>
  <div class="wrap">
    <swiper v-bind="swiperOptions">
      <swiper-slide
        v-for="item in swiperList"
        :key="item.name"
      >
          <div class="content">
            <h5>종료</h5>
            <span>
              {{item.name}}
            </span>
          </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";

export default {
  name: "HelloWorld",
  components: {
    Swiper,
    SwiperSlide,
  },
  data: () => ({
    swiperList: [
      
    ],
    swiperOptions: {
      navigation: true,
      slidesPerView: "auto",
      spaceBetween: 10,
      grabCursor: true,
    },
  }),
  mounted() {},
  methods: {},
};
</script>
<style>
.swiper {
  width: 100%;
  height: 90px;
}

.swiper-slide {
  background: #fff;
  width: 90px;
}

</style>

vue2에선 적용 안됨
slidesPerView를 auto로 하고 넓이를 지정해주면 반응형 적용 안됨