Autoplay behaves weirdly when changed reactively

[HeshamMeneisi]

Bug Report

Current Behavior When autoplay is turned off/on reactively there seem to be multiple timers working at the same time (just an educated guess) as the following behaviors occur:

1. Wrong timeout (shorter)
2. Double sliding (two pages at a time)
3. Sliding even though autoplay is currently false

Input Code and steps to reproduce

This is a simplified version of the code. There are other ways the video is played/paused other than controls but it's ultimately the @play and @pause handling it.

<carousel
  :autoplay="!isVideoPlaying"
>
  <slide>
    <video
       controls
       @play="onPlay"
       @pause="onPause"
    >
      <source
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4"
      >
      Your browser does not support HTML video.
    </video>
  </slide>
  <slide>
    Test slide.
  </slide>
</carousel>

<script lang="ts">
  import Vue from 'vue'
  import { Carousel, Slide } from 'vue-carousel'

  export default Vue.extend({
      data() {
        return {
          isVideoPlaying: false,
        }
      }
      methods:{
        onPlay () {
          this.isVideoPlaying = true
        },
        onPause () {
          this.isVideoPlaying = false
        },
      }
  })
</script>

Expected behavior/code Autoplay timer should be paused/resumed when autoplay is changed instead of (seemingly) starting a new timer and causing erroneous behavior.

Environment

• Babel version(s): 7.0.0-bridge.0
• Node/npm version: Node v12.13.0 / npm 6.13.4
• OS: Ubuntu 18.04

Possible Solution Investigate how autoplay timer is currently created/started/stopped.