it turns out that it is caused by v-for, that is, you have several swiper, on a page at the same time, so just reinitialize different ref, according to the cyclic index.


you'd better change your usage
within the component

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
 
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
  export default {
      components: {
        swiper,
        swiperSlide
      }
    },
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        swiperSlides: [1, 2, 3, 4, 5]
      }
    },
  }
</script>

<template>
  <div class="content clearfix">
    <div class="leftBar leftHelpBar">
      <ul class="leftHelp_tab clearfix">
        <li v-for="(item, tabIndex) in items" :class="{onCur: iscur == tabIndex}" @click="setCur(tabIndex)" :key="tabIndex">{{ item.name }}</li>
      </ul>
       <ul class="help_list" v-for="(item, i) in items" :key="i" v-show="iscur == i">
        <li v-for="(item, index) in item.dataList" :key="index">
          <h3>{{ item.title }}</h3>
          <span v-for="(item, subIndex) in item.content"
                :key="subIndex"
                :class="{curStyle: `${i},${index},${subIndex}`== getcur}"
                @click="postCur(`${i},${index},${subIndex}`)">
            {{ item.subTit }}
          </span>
        </li>
      </ul>
    </div>
    <div class="rightBar">
      <div v-for="(item, i) in items" :key="i" class="help-img-con">
        <div v-for="(item, index) in item.dataList" :key="index">
          <div v-for="(item, subIndex) in item.content"
               :key="subIndex"
               v-show="`${i},${index},${subIndex}`== getcur"
               v-swiper:mySwiper="swiperOption"
               :ref=" `mySwiper${subIndex}` " <======= change here
               :options="swiperOption">
            <ul class="swiper-wrapper">
              <li v-for="(item, k) in item.img" :key="k" class="help-img-list swiper-slide">
                <img :src="item.imgsrc" alt="" />
              </li>
            </ul>
            <div class="swiper-button-next" slot="button-next"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      iscur: 0,
      getcur: '0,0,0',
      swiperOption: {},
      items: []
    }
  },
    created(){
    axios.get('static/data/leftHelpBase.json')
      .then((res) => {
        console.log(res)
        this.items = res.data.dataInfo
      })
      .catch((err) => {
        console.log(err)
      })},
  mounted: function () {
  },
  methods: {
    setCur: function (index) {
      this.iscur = index
      this.getcur = index + ',0,0'
    },
    postCur: function (index) {
      this.getcur = index
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  }
}
</script>

get, portal https://codeshelper.com/q/10.

take a closer look at the swiper documentation!