如何在nuxt.js/vue2项目中使用swiper 8

问题遇到的现象和发生背景

如何在nuxtjs/vue2项目中需要用到swiper8，试了网上的一些方法还是未能实现。

用代码块功能插入代码，请勿粘贴截图

涉及版本
"vue": "2.6.14",
"nuxt": "2.14.6",
"swiper": "^8.3.2"

<template>
  <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">1111div>
        <div class="swiper-slide">2222div>
        <div class="swiper-slide">3333div>
        <div class="swiper-slide">4444div>
      div>
  div>
template>

<script>
import Swiper from 'swiper/swiper'
import 'swiper/swiper.css'

export default {
  mounted() {
    new Swiper('.swiper', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      loop: true,
      autoplay: {
        delay: 5000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      effect: 'fade'
    })
  }
}
script>
运行结果及报错内容

项目能启动，控制台未报错，但会自动跳转到错误页面

我的解答思路和尝试过的方法

网上很多讲的要么是vue-awesome-swiper，要么是swiper低版本的，很少看到有关于nuxt/vue2项目中使用swiper8。

我想要达到的结果

能在nuxtjs/vue2项目中使用swiper8