"Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture." toggle() called through global event or wrapper component

[andrelec1]

1. : Register a empty vue component for handle global event.

   const EventBus = new Vue({
   name: 'EventBus',
   });
   Vue.set(Vue.prototype, '$bus', EventBus);

2. : Emit event from you desired component

   this.$bus.$emit('fullScreen-toggle');

3. : Listen the event and cry

   mounted() {
     this.$bus.$on('fullScreen-toggle', this.setFullScreen);
   },
   beforeDestroy() {
     this.$bus.$off('fullScreen-toggle');
   },
   methods: {
     setFullScreen() {
       this.$refs['fullscreen'].toggle();
     },
   },

Another try with wrapped component ...

1. Register global component with method

   
   const Test = new Vue({
   methodes: {
   async startTest($vm = null) {
       $vm.$root.$children[0].setFullScreen();
   },
   },
   });

Vue.set(Vue.prototype, '$test', Test);

2 : Add this in #app component... 
```js
methods: {
      setFullScreen() {
        this.$refs['fullscreen'].toggle();
      },

3. call from another component and cry again ....

   this.$test.startTest(this);

[mirari]

requestFullscreen

This method must be invoked from a user interaction or a device orientation change, else it will fail.

Because of the browser security function, you can only call these methods by a user gesture, event bus can not work, just like the prop watch. The second try should work, if you call the this.$test.startTest in a click callback.