vue3中使用swiper7及autoplay无效问题

版本 vue 3.2.26  swiper 7.4.1

坑啊，真的是太坑了，swiper7中使用需单独引入组件

<!--  -->
<template>
	<div>
		<swiper
			:direction="'vertical'"
			slidesPerView="3"
			:modules="modules"
			observer
			loop
			:autoplay="{
				delay:1000
			}"
		>
			<swiper-slide v-for="item in list" :key="item">{{item}}</swiper-slide>
		</swiper>
	</div>
</template>

<script>
import {Pagination,Autoplay} from 'swiper'
import {Swiper,SwiperSlide} from 'swiper/vue/swiper-vue'
import 'swiper/swiper.min.css'
import 'swiper/modules/pagination/pagination.min.css'
export default {
	components:{
		Swiper,
		SwiperSlide
	}
	data () {
		return {
			list:[]
			modules:[Pagination,Autoplay]
		};
	},

  	mounted(){
		  for(let i=0;i<10;i++){
			  this.list.push(i)
		  }
	  },

  methods: {}
}

</script>
<style lang='less' scoped>
.swiper {
	height: 100%;
}
</style>

重点在于引入autoplay这个组件

这里还附上了swiper的引入问题，在最开始使用的时候引入css也报错，官方文档真是烂的可以了。。。