this.$refs.fullscreen.toggle is not a function error when using Vue full screen package

Question

Hello everybody i get the error this.$refs.fullscreen.toggle is not a function when i tried to implement vue-fullscreen in my project. here is my code.

<template>
 <div id="app">
<fullscreen ref="fullscreen" @change="fullscreenChange">
  Content
</fullscreen>
  <button type="button" @click="toggle" >Fullscreen</button>
 </div>
</template>
<script>
 import fullscreen from 'vue-fullscreen'
 import Vue from 'vue'
 Vue.use(fullscreen)
 export default {
 methods: {
  toggle () {
    this.$refs['fullscreen'].toggle() 
  },
  fullscreenChange (fullscreen) {
    this.fullscreen = fullscreen
  }
},
data() {
  return {
    fullscreen: false
   }
  }
 }
</script>

Answer 1

Finally this work for me

document.querySelector("#toFull").addEventListener("fullscreenchange", function (event) {
        if (document.fullscreenElement) {
          document.querySelector("#exitFullScreen").style.display = "block";
        } else {
          document.querySelector("#exitFullScreen").style.display = "none";
        }
    });