add support for prop mutation

packages/vue-freezeframe/src/components/VueFreezeframe.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="vue-freezeframe">
+  <div class="vue-freezeframe" v-if="ready">
     <slot v-if="$slots.default" />
     <img v-else-if="src" ref="img" :src="src" />
   </div>
 </template>
 
 <script lang="ts">
 import Freezeframe from 'freezeframe'
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import { FreezeframeOptions, Freeze } from 'freezeframe/types'
 
 @Component({
@@ -22,14 +22,35 @@ export default class VueFreezeframe extends Vue {
   options?: FreezeframeOptions
 
   // data
+  ready = false
   isPlaying = false
   $freezeframe?: Freezeframe
 
   $refs!: {
     img: HTMLImageElement
   }
 
+  @Watch('src')
+  onSrcChanged() {
+    this.reset()
+  }
+
+  @Watch('options')
+  onOptionsChanged() {
+    this.reset()
+  }
+
   mounted() {
+    this.init()
+  }
+
+  beforeDestroy() {
+    this.removeEventListeners()
+  }
+
+  async init() {
+    this.ready = true
+    await this.$nextTick()
     if (this.$slots.default) {
       this.$freezeframe = new Freezeframe(this.$el, this.options)
     } else if (this.src) {
@@ -38,6 +59,13 @@ export default class VueFreezeframe extends Vue {
     this.addEventListeners()
   }
 
+  async reset() {
+    this.ready = false
+    this.removeEventListeners()
+    await this.$nextTick()
+    this.init()
+  }
+
   addEventListeners() {
     if (this.$freezeframe) {
       this.$freezeframe.on('toggle', (items: Freeze[], isPlaying: boolean) => {
@@ -48,6 +76,12 @@ export default class VueFreezeframe extends Vue {
     }
   }
 
+  removeEventListeners() {
+    if (this.$freezeframe) {
+      this.$freezeframe.destroy()
+    }
+  }
+
   start() {
     if (this.$freezeframe) {
       this.$freezeframe.start()