Не подключается swiper слайдер к vuejs,

У меня возникла проблема не хочет подключаться swiper-slider. SWIPER добавил через npm i [email protected]

//КОМПОНЕНТ SLIDER.VUE

<template>
  <div>
    <div>
      <h2 class="text-2xl">Слайдер</h2>
    </div>
    <div class="slider-block border border-yellow-400 mt-10 h-">
      <swiper
        :slidesPerView="3"
        :spaceBetween="30"
        :slidesPerGroup="3"
        :loop="true"
        :loopFillGroupWithBlank="true"
        :pagination="{
          clickable: true,
        }"
        :navigation="true"
        class="mySwiper w-1/4"
      >
        <swiper-slide v-for="(item,index) in 9" :key="index">Slide 1</swiper-slide>      
      </swiper>
    </div>
  </div>
</template>
 
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
 
// swiper bundle styles
import "swiper/swiper-bundle.min.css";
 
// swiper core styles
import "swiper/swiper.min.css";
 
// modules styles
import "swiper/components/navigation/navigation.min.css";
import "swiper/components/pagination/pagination.min.css";
 
// import Swiper core and required modules
import SwiperCore, { Pagination, Navigation } from "swiper";
 
// install Swiper modules
SwiperCore.use([Pagination, Navigation]);
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
};
</script>

компонент зарегистрировал в app.js:

Vue.component('slider', require('./components/Slider.vue').default);

Но в консоли выходит ошибка и слайдер не работает.

[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'value')"

found in

---> <SwiperSlide>
       <Swiper>
         <Slider> at resources/js/components/Slider.vue
           <Root>
warn$2 @ app.js:20141
logError @ app.js:18805
globalHandleError @ app.js:18801
handleError @ app.js:18768
invokeWithErrorHandling @ app.js:18784
callHook$1 @ app.js:18178
insert @ app.js:19959
invokeInsertHook @ app.js:21989
patch @ app.js:22200
Vue._update @ app.js:17912
updateComponent @ app.js:18022
Watcher.get @ app.js:19206
Watcher @ app.js:19196
mountComponent @ app.js:18039
Vue.$mount @ app.js:24348
Vue.$mount @ app.js:26912
./resources/js/app.js @ app.js:831
__webpack_require__ @ app.js:26955
(anonymous) @ app.js:27113
__webpack_require__.O @ app.js:26989
(anonymous) @ app.js:27115
(anonymous) @ app.js:27117
app.js:18809 TypeError: Cannot read properties of undefined (reading 'value')
    at VueComponent.<anonymous> (app.js:9988:22)
    at invokeWithErrorHandling (app.js:18777:61)
    at callHook$1 (app.js:18178:13)
    at Object.insert (app.js:19959:13)
    at invokeInsertHook (app.js:21989:38)
    at Vue.patch [as __patch__] (app.js:22200:9)
    at Vue._update (app.js:17912:25)
    at Vue.updateComponent (app.js:18022:16)
    at Watcher.get (app.js:19206:33)
    at new Watcher (app.js:19196:51)

Буду признателен любой помощи!