[Vuejs]-Vue: beforeunload event listener is not being removed

To further elabourate on my comment: the reason why your onbeforeunload event listener is not unbound is because the beforeDestroy() lifecycle hook is only fired when a VueJS component is destroyed. When you close the browser tab/window, the entire thread is wiped and this does not trigger component destruction.

Since you only want to remove the listener after the modal is closed, it makes sense to do it in the close() method: hence why you approach worked.