vue-awesome-slider not swipping before reload page

<!--
  This gist is related to the issue
  https://github.com/surmon-china/vue-awesome-swiper/issues/115
-->

<template>
<div :class="{ 'my-workout-item-wrapper': true, 'finished': finished }">
  <div class="my-workout-item mwi swiper-container">
    <swiper :options="swiperOptions" ref="mySwiper" class="swiper-wrapper">
      <swiper-slide class="swiper-slide">
        <div :class="{
            'mwi-page': true,
            'mwi-page-1': true,
            'with-interval': workout.interval,
            'without-interval': !workout.interval}">
          <div class="mwi--header">
            <label class="mwi--checkbox" v-if="editable">
              <ui-checkbox v-model="finished"></ui-checkbox>
            </label>
            <div class="mwi--title">
              {{ workout.name }}
            </div>
          </div>
          <div class="mwi--body" v-show="!finished">
            <div class="mwi--reps">
              <div v-if="workout.minutes">
                <div class="mwi--rep">
                  <span class="mwi--rep-title">Minutos</span>
                  <span class="mwi--rep-value">{{ workout.minutes }}</span>
                </div>
              </div>
              <div v-else>
                <div class="mwi--rep">
                  <span class="mwi--rep-title">Séries</span>
                  <span class="mwi--rep-value" ref="workoutSeries">{{ _series }}</span>
                </div>
                <div class="mwi--rep">
                  <span class="mwi--rep-title">Repetições</span>
                  <span class="mwi--rep-value">{{ workout.repetitions }}</span>
                </div>
                <div class="mwi--rep" v-if="workout.weight">
                  <span class="mwi--rep-title">Carga</span>
                  <span class="mwi--rep-value">{{ workout.weight }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="mwi--footer" v-if="workout.interval" v-show="!finished">
            <div class="mwi--interval">
              <ui-icon>timer</ui-icon> <b>Intervalo</b> {{ workout.interval }}s
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide" v-if="!workout.minutes">
        <div :class="{
            'mwi-page': true,
            'mwi-page-interval': true, }">
          <div class="dpix-close" @click="closeInterval">&#10006;</div>
          <div class="dpix">
            <div class="dpix-label">Intervalo</div>
            <div class="dpix-interval" ref="interval"></div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <div :class="{
            'mwi-page': true,
            'mwi-page-final': true, }">
          <div class="mwi-page-final-icon-wrapper">
            <ui-icon>check</ui-icon>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</div>
</template>

<script>
import $ from 'jquery';
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'MyWorkoutItem',
  props: [ 'workout', 'editable' ],
  data() {
    return {
      // swiper: null,
      finished: false,

      _series: 0,
      _interval: null,
      _intervalCount: 0,

      swiperOptions: {
        direction: 'horizontal',
        loop: false,
        speed: 200,
        longSwipes: false,
        // effect: 'flip', // Could be "slide", "fade", "cube", "coverflow" or "flip"
        grabCursor: true,
        onlyExternal: !this.editable,
        onSlideChangeEnd: this.onSwipeEnd
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs['mySwiper'].swiper;
    },
  },
  methods: {
    getData() {
      let workout = {
        series: this.workout.series,
        repetitions: this.workout.repetitions,
        weight: this.workout.weight,
        interval: this.workout.interval,
        minutes: this.workout.minutes,
        done_series: this.isFinished()
          ? this.workout.series
          : this.workout.series - this._series,
      };
      return workout;
    },
    isFinished() {
      return this.finished;
    },
    reload() {
      if(this._series <= 0) {
        this.setSeries(this.workout.series);
      }
      this.setIntervalCount(this.workout.interval);
    },
    setSeries(count, animated) {
      this._series = count;
      let elem = $(this.$refs.workoutSeries);
      if(!elem.length) return;
      if(animated) {
        elem.animate({opacity: 0}, 'slow', () => {
          elem.html(''+count);
          elem.animate({opacity: 1}, 'slow');
        });
      } else {
        elem.html(''+count);
      }
    },
    setIntervalCount(count) {
      this._intervalCount = count;
      if(this.$refs.interval) {
        this.$refs.interval.innerHTML = count;
      }
    },
    onSwipeEnd() {
      if(this.swiper.realIndex === 2) {
        this.swiper.slideTo(1);
        return;
      }
      if(this.swiper.realIndex === 1) {
        this.swiper.lockSwipes();
        
        if(this.workout.minutes) {
          this.finishInterval(true);
        } else {
          this.startInterval();
        }
      }
    },
    startInterval() {
      // console.log(this.$refs.interval, this.$refs);
      clearInterval(this._interval);
      this.setIntervalCount(this.workout.interval);
      this._interval = setInterval(() => {
        this._intervalCount--;
        
        if(this._intervalCount < 0) {
          this.closeInterval();
        } else {
          this.setIntervalCount(this._intervalCount);
        }
      }, 1000);
    },
    closeInterval() {
      clearInterval(this._interval);
      
      if(this._series > 1) {
        this.finishInterval();
      } else {
        this.finishInterval(true);
      }
    },
    finishInterval(theEnd) {
      clearInterval(this._interval);
      this.swiper.unlockSwipes();
      this.setSeries(this._series-1, true);
      if(theEnd === true) {
        this.swiper.slideNext(false);
        setTimeout(() => {
          this.swiper.slideTo(0);
          this.finished = true;
        }, 1000);
      } else {
        this.setIntervalCount(this.workout.interval);
        this.swiper.slideTo(0);
        /*if(this._series <= 0) {
          this.finished = true;
        }*/
      }
    },
  },
  created() {
    this._series = this.workout.series;
    this._intervalCount = this.workout.interval;

    $(document).ready(() => {
      setTimeout(() => {
        if(this.editable) {
          this.swiper.unlockSwipes();
        }
      }, 500);
    });
  },
  watch: {
    finished() {
      if(!this.finished) {
        this.reload();
      }
    },
  },
  components: { swiper, swiperSlide }
}
</script>