1👍
A quick explanation from the documentation-
All top-level routes’ views are rendered inside the router-view of the application. For example, App.vue file always contains router-view so that every route’s view can render inside it and this process happens with all top-level routes.
Now, if take nested routes (child routes) into consideration then all top-level route’s views (pages or components) must have their own router-view to render their child components.
For example, in your provided code all routes are top-level routes whose views’ will render inside the App.vue’s router-view, only account.orders is a child route that needs the account.profile (its parent route) route’s router-view.
Solution–
Just create a router-view inside AccountProfile.vue and then its child route should be able to render inside it.
You can read more explanations here.
Note-
A nested route’s view will always contain its parent route’s view and this also depends on your UI. So you need a child route or a sibling route, choose according to the use case.