After update autoplay and autoplayInterval configurations, reload() do not work as it should

[VasylRolique]

Describe the bug
Once next or prev button was clicked it should stop autoplaying immediately, but for now it have some weird behavior and sometimes it works correct, sometimes it will autoplay one more time before disabling, and sometimes it continue auto playing without stopping.

Code

<agile ref="carousel"
         :autoplay="autoplay"
         :autoplay-speed="autoplayInterval"
         pause-on-hover
         pause-on-dots-hover
         :speed="800"
  >
    <slot />
    <template slot="prevButton">
      <span @click="stopAutoplay()">
        <font-awesome-icon :icon="fasArrowLeft" />
      </span>
    </template>
    <template slot="nextButton">
      <span @click="stopAutoplay()">
        <font-awesome-icon :icon="fasArrowRight" />
      </span>
    </template>
  </agile>

export default {
  name: 'LhCarousel',
  components: { agile: VueAgile },
  data () {
    return {
      autoplay: true,
      autoplayInterval: 7000,
      fasArrowLeft,
      fasArrowRight,
    }
  },
  methods: {
    stopAutoplay () {
      this.autoplay = false
      this.autoplayInterval = null
      this.$refs.carousel.reload()
    },
  },
}
</script>

To Reproduce
try to disable autoplay in real time

Expected behavior
After reload() autoplay configuration should be reflected new effect if value was changed

[issue-label-bot]

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.95. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.