Vuejs 3: Why is my custom dialog not appearing when the user tries to leave the page without saving data?

Question

How to display custom dialog in vuejs 3 when user try to leave page without saving data ?

I try to use onBeforeunload in mounted hook but my dialog don't appear Here is my code:

onMounted(() => {
  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
    console.log(event);
    event.preventDefault();
    event.returnValue = "";
    wantToLeavePage.value = true;
    console.log("want to leave page", wantToLeavePage.value);
  };
  window.addEventListener("beforeunload", handleBeforeUnload);
});

My dialog should appear when wantToLeavePage is true