Detect click outside doesn't work properly on route change in a iframe on a different website

I am building a web app that will be embedded inside another web page with iframe(same-origin). It uses vue-router for route change. I want to detect click outside so the user can close the app by clicking outside it.

I have this code(main.js): :

/* Simple click outside detector for vue3 */
const clickOutside = {
  beforeMount: (el, binding) => {
    el.clickOutsideEvent = event => {
      //Check if the click was outside the el and his children
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        binding.value();
      }
    };
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unmounted: el => {
        document.removeEventListener("click", el.clickOutsideEvent);
      }
};

Usage as directive(App.vue):

<div id="aimy-home" v-click-outside="handleCloseClick">
    <!-- CONTENT -->

    <!-- ROUTER CONTENT -->
      <router-view />
< /div>

I am sorry, I couldn't make a snippet.

The code above works fine on main page. The problem is that after route changed, even if the user clicks 'inside' the app the app will close.

from Detect click outside doesn't work properly on route change in a iframe on a different website