using same swiper, this.swiper on one method works but the other method, it appears null.

I'm using vue-awesome swiper on SPA web page. I'm using like this in template.

<template>
...
              <swiper class="responsive"
                      :options="swiperOption"
                      ref="reportSwiper" 
                      :not-next-tick="true"
                      >
                <swiper-slide  v-for="date in slideList" v-bind:key="date">
                  <router-view  v-bind:date-info="date" ></router-view>
                </swiper-slide>  

                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>                
              </swiper>

...
</template>

this is how to imported.

import 'swiper/dist/css/swiper.min.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

and I''ve set computed to use it.

  computed: {
    swiper() {
      return this.$refs.reportSwiper.swiper;
    },
}

And I'm using this.swiper at two methods.

  methods: {
    prependSlide() {
     if (this.swiper.activeIndex <= 1) {
   ....
    },
    appendSlide() {
      if ((this.swiper.activeIndex >= (this.slideList.length - 2)) {
      .....
      }
    }
}

Strange thing is, prependSlide() works as normal. but this.swiper at appendSlide() {} makes an error. the error message is

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'activeIndex' of null"

And this.swiper appears null as alert(this.swiper);

But if I delete appendSlide() {}, it works.

How can I fix this? I really need help.

surmon-china / vue-awesome-swiper

using same swiper, this.swiper on one method works but the other method, it appears null. #606