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.