Stuck on an issue?

Description

When using wavesurfer plugin, it seems the surfer never gets initiated which result in params not found within the wavesurfermiddleware.

Steps to reproduce

Vue component file

<template>
    <div id="media-canvas" class="relative">
        <video class="video-js vjs-default-skin" id="media-player" playsinline>
            <source v-for="media of medias" :key="media.media_path" :src="media.media_path">
        </video> 
    </div>
</template>
<script>
import videojs from 'video.js';
import WaveSurfer from 'wavesurfer.js';
import wavesurfer from 'videojs-wavesurfer';
export default {
    props: ['medias'],
    data() {
        return {
            player      : null,
            playing     : false,
            mediaConfig: {//https://github.com/videojs/video.js/blob/master/docs/guides/options.md
                controls  : true,
                bigPlayButton: false,
                loop      : false,
                autoplay  : false,
                fluid     : true,
                controlBar: {
                    deviceButton    : false,
                    pipToggle       : false,
                    recordToggle    : false,
                    fullscreenToggle: false
                },
                plugins   : {
                    wavesurfer: { //https://wavesurfer-js.org/docs/options.html
                        backend            : 'WebAudio',
                        displayMilliseconds: true,
                        debug              : true,
                        waveColor          : '#c2ebff',
                        progressColor      : 'black',
                        cursorWidth        : 2,
                        hideScrollbar      : true
                    }
                }
            }
        }
    },
    mounted() {
        toast.loading();
        this.initMedia().then(()=>toast.hide_loading());
    },
    beforeUnmount() {
        if (this.player) {
            this.player.dispose();
        }
    },
    methods: {
        initMedia() {
            return new Promise((resolve, reject) => {
                try {
                    if (this.player) {
                        this.player.dispose();
                    }
                    this.player = videojs('#media-player', this.mediaConfig);
                    this.player.on('deviceReady', () => {
                        this.loading = false;
                        this.ready   = true;
                    });

                    this.player.on('error', (element, error) => {
                        this.mediaError.push(error);
                    });

                    resolve();
                } catch (e) {
                    reject(e);
                }
            });
        }
    }
}
</script>

Results

Expected

Please describe what you expected to see. wavesufer should display

Actual

when using the component and loading a webm file via the medias prop.getting error The error is coming from videojs.wavesurfer.js -> WavesurferMiddleware()-> var backend=this.player.wavesurfer().surfer.params.backend;

Seems wavesurfer().sufer is undefined.

Error output

Uncaught TypeError: Cannot read properties of undefined (reading 'params')
    at Object.setSource (videojs.wavesurfer.js?66e3:144:1)
    at setSourceHelper (video.es.js?31bb:10175:1)
    at setSourceHelper (video.es.js?31bb:10193:1)
    at Player.eval (video.es.js?31bb:9931:1)
    at eval (video.es.js?31bb:5140:1)

Versions

videojs/wavesurfer

video.js:7.17 videojs-wavesurfer:3.8.0 wavesurfer.js:6.0.1

Browsers

chrome

OSes

Linux