How to detect if there are connection problems in Vue

I have an application in Vue 3 and it has to detect when there are internet problems to do certain processes apart from notifying the user.

I currently handle it this way, in the onMounted I have these events

window.addEventListener('load', VERIFY_CONNECTION);
window.addEventListener('online', VERIFY_CONNECTION);
window.addEventListener('offline', VERIFY_CONNECTION);

And my VERIFY_CONNECTION function simply has this

export function VERIFY_CONNECTION()
{
  let status = navigator.onLine;

  store.dispatch(CONFIGURATION_CONNECTION, status);
}

This really works well, if the device does not have an active Wi-Fi connection it gives the alert and executes the processes that I need, but if for example I am connected to Wi-Fi and I have internet problems the application still does not detect that there is no internet until it is disconnected completely Wi-Fi. I have seen websites and applications that detect in real time if there are internet interruptions.

How can I detect if the application has internet problems even when it is connected to a network?

It should be noted that as I have it it works well, but I know that it can be improved but I don't really know how to do it