Automation UI tests in a SPA application not waiting for page to load

We are using and single page application (SPA, which renders client-side) using Vue.js and we have UI automation tests using Selenium. I don't think the fact we are using Vue.js and Selenium is the issue, I think this is a general issue when UI testing with a SPA application.

The problem

The tests are running before the DOM has loaded...

In a SPA, when navigating, the browser does not reload, so the issue lies when the tests think they can run straight away.

In a server-side rendered application (like MVC), the browser reloads when navigating to a different page, only when the browser decides the page has loaded will the tests run.

This is not the case in SPA, the browser in a SPA doesn't (as far as I'm aware) have a way of telling the tests when the page is ready to test.

Can anyone help? I am looking for a solution or an event for the browser to let the tests know when they are ready to run.

Tried solutions

We have hard-coded a timeout for the tests to wait (which works sometimes), but it doesn't guarantee every pipeline build will pass since it's not guaranteed the same load speed each time and doesn't guarentee the page will load before the timeout has expired.