Cannot read property 'swiper' of undefined" when 'not-next-tick:true' in mounted

template:

<swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
  <slide v-for="item in XXX">
</swiper

script:

data:{
       notNextTick: true,
        swiperOption: {
          initialSlide: 0,
          onlyExternal: true,
          onInit: (swiper) => {
            console.log(swiper)
          },
          onReachEnd: (swiper) => {
            console.log('last slide')
          }
        }
},
computed: {
      swiper () {
        return this.$refs.mySwiper.swiper
      }},
mounted () {
     console.log(this)
     console.log(this.swiper)
}

all above is my real code refered to README/#Use in SPA

error in broswer and never console

I need swiper instance first time,but I can’t get it Someone else know why and how?

[mangoqili]

The reason for the real mistake is that this swiper’s parent has v-if, change v-if to v-show

[honey93]

I am also facing the same issue, on initial load it is showing the swiperobject but once I route and come back to that same page, I do face that issue.