first explain what you want to achieve.
only needs to be implemented in main.js or App.vue, without adding page-loaded code for each subcomponent. When the progress bar is loaded to 100%, it must be after the data is loaded and rendered.
now the main difficulty is how to obtain sub-component data in main.js and App.vue and request rendering completion.

traditional websites, DOMContentLoaded and onload can know that dom loading and parsing is complete and all files are downloaded. This makes it easy to simulate a page loading progress bar.
but the SPA site loading process enters the page for the first time: DOMContentLoaded,onload,ajax requests data and renders the data. Route switching: ajax requests data and renders data.
ask for expert solutions. Or we can discuss it together. I don"t want to add a loaded code to every page. It"s troublesome.