I am trying to understand how Peaks works in this Vue example. It seems that peaks is not available on Vue's data options. Or am I mistaken?

Here is what I did in order to make peaks to data:

I tried to move the cues-generating part of the onWaveformLoaded to its own function showCues and call that one from a button event listener:

export default {
  data () {
    return {
      peaks: null
    }
  },
  mounted() {
    document.querySelector('[data-action="show-cues"]').addEventListener('click', () => {
      this.showCues();
    });
  },
  methods: {
    onWaveformLoaded(error, peaks) {
      [...]
      this.peaks = peaks
    },
    showCues () {
      this.cues.forEach(cue => this.peaks.points.add(cue))
      this.peaks.on('points.dragmove', ({ id, time:newTime }) => {
        const time = parseFloat(newTime.toFixed(4))
        this.$store.commit('programme/cueUpdate', { id, time })
      })

      // Test: log out `this._waveform`
      console.log("this._waveform =", this._waveform)
    },
  }
}

This makes it work for this scenario. But I wonder, if this is the way to go. I have no idea what this._waveform is actually doing. Logging it out at the end of showCues only results in undefined.

I wanted to have the destroy function available as a separate function (n case it is needed somewhere else) and did this:

beforeDestroy () {
  this.destroyWaveform()
},
methods: {
    destroyWaveform () {
      this._waveform.destroy()
    }
}

However, this_waveform is not available, the console throws this error.

Uncaught TypeError: Cannot read property 'destroy' of undefined

Any thoughts on what I am doing wrong?

To update cues, Vue.set is used:
https://github.com/oncletom/vue-waveform-template/blob/main/src/store/modules/programme.js#L37-L39

This does not work in Nuxt.js, unless "export const strict = true" is set in "store/index.js" (vuex standard folder in nuxt).

I posted this problem on the Vue Forums:
https://forum.vuejs.org/t/nuxt-2-vuex-updating-an-object-within-an-array-with-vue-set-throws-error/125558

I hope this finds an answer, and if so, it should probably be mentioned in this excellent template!

There have been quite some update on peaks. On npm is v 0.28.1, and on github the event model has changed completely: bbc/peaks.js#427

I was looking forward to that change, since it opens the possibility to include a right-click menu (new event "contextmenu"). But first and foremost my app completely broke. I am wondering if this is due to the way Vuex stores cue data. So I tried to setup your template, but to no avail, I couldn't get it running with v0.28.1

Is there any chance I could motivate you to update this template, maybe even to the latest version on github?