Enable fullscreen in Vue.js

Question

I'm using vueuse's useFullscreen to enable fullscreen mode on our website, but I'm facing a permission problem (Permissions policy violation: fullscreen is not allowed in this document.). How can I resolve this issue and grant permission in vue.js? Below is my code:

import { useFullscreen } from "@vueuse/core";
const el = ref(null);
const { isFullscreen, enter, exit, toggle } = useFullscreen(el);

<div ref="el">
  <button class="p-1 btn-primary" @click="toggle">
     <Icon :size="20" :path="isFullscreen ? mdiClose : mdiFullscreen" />
  </button>
</div>