This might be something the way js is complied for Vuejs in Laravel but here is the problem.

I have GrapesJs javascript package used like

    <template>
  <div class="base">
    <div id="gjs">
      <h1>Hello World Component!</h1>
    </div>
    <!-- <div id="blocks"></div> -->
  </div>
</template>

<script>
import grapesjs from "grapesjs";
import greapejspreset from "grapesjs-preset-webpage";
export default {
  data() {
    return {
      editor: null,
    };
  },

  mounted() {
    this.editor = grapesjs.init({
      // Indicate where to init the editor. You can also pass an HTMLElement
      container: "#gjs",
      // Get the content for the canvas directly from the element
      // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
      fromElement: true,
      // Size of the editor
      height: "1000px",
      width: "auto",
      // Disable the storage manager for the moment
      storageManager: false,
      // Avoid any default panel
      cssIcons: null,
      plugins: [
        // 'gjs-blocks-basic',


           greapejspreset,
          ],
   this.editor.command("open-blocks");
    });
  },
};
</script>

If I have same example outside the vue file the click on icons works but in this instance when I click any of the icons below it does not trigger anything, its like those events are blocked by vuejs

Please help!!!