userAction.click doesn't work #7875

<template>
    <div class="player-video overflow-x-hidden">
        <video :id="id" class="player-video-box">
            <source :src="url" type="application/x-mpegURL" />
        </video>
</template>
<script>
import videojs from 'video.js';
import { onUnmounted, reactive, toRefs, watch } from 'vue';
export default {
    props: {
        isPlaying: {
            type: Boolean,
            default: false
        id: {
            type: String,
            default: `player-video-box-${new Date().getTime()}`
        height: {
            type: [Number, String],
            required: true
        url: {
            type: String,
            required: true
    setup(props, { emit }) {
        const data = reactive({
            isMounted: false,
            player: null
        watch(() => props.height, () => {
            if (props.height > 0)
                if (!data.isMounted) methods.setVideo(props.id, props.height);
                else data.player.height(props.height);
        onUnmounted(() => {
            if(data.player) data.player.dispose();
        const methods = {
            setVideo(id, height) {
                console.log(id);
                data.isMounted = true;
                data.player = videojs(id, {
                    height: height,
                    loop: true,
                    autoplay: true,
                    controls: false,
                    preload: 'auto',
                    notSupportedMessage: 'Play failed, please check your network connection and try again later',
                    userActions: {
                        doubleClick: false,
                        click: function(_) {
                            console.log('click', this);
                            if (this.isFullscreen()) this.exitFullscreen();
                            else this.requestFullscreen();
                }, function () {
                    this.on('playing', function () {
                        console.log('onplaying');
                        emit('update:isPlaying', true);
                    this.on('waiting', function () {
                        console.log('onwaiting');
                        emit('update:isPlaying', false);
                    this.on('error', function (e) {
                        console.log('onerror', e);
        return { ...toRefs(data), ...methods, ...props };
</script>
<style lang="scss" scoped>
.player-video {
  position: relative;
:deep(.vjs-control-text) {
  display: none;
</style>
3.using components




    

<template>
    <div class="sentry-video">
                v-for="(key, index) of liveList"
                :key="index"
            <PlayerVideo v-model:isPlaying="key.isPlaying"
                         :id="`sentry-video-item-${index}`"
                         :url="key.url"
                         :height="videoHeight"
</template>
Errors
nothing
What version of Video.js are you using?
7.20.2
Video.js plugins used.
No response
What browser(s) including version(s) does this occur with?
Microsoft Edge 105.0.1343.4 dev (x64)
What OS(es) and version(s) does this occur with?
Windows 11