How are cascading router-view elements handled?

TL;DR: how are the priorities of Vue routes (global vs child) calculated?

Quasar is a Vue framework that can bootstrap applications. I am trying to follow its suggested structure but I am not sure how Vue routing works with cascading router-view elements.

In a bootstrapped application, the routes are defined as

import type { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
},
// Always leave this as last one,
// but you can also remove it
{
path: '/:catchAll(.)',
component: () => import('pages/ErrorNotFound.vue'),
},
];
export default routes;

Let's assume that we are at /.

The first component that starts everything else (App.vue) is

<template>
  <router-view />
</template>
<script setup lang="ts">
//
</script>

So when I am at /, the MainLayout component is lazy loaded. This is it, I removed all other components (sidebar etc.) to just keep the part that is relevant to this question:

<template>
  <q-layout view="lHh Lpr lFf">
<!-- header, sidebar ->
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>

So we have again <router-view />. What is it supposed to display?

I know the answer is IndexPage.vue and I am guessing that this is because it is a child, with a '' path. Which other path entries are possible for children?

If this is, say, admin, how does <router-view /> know that it is this component that should be mounted, and not the one from this slightly expanded routes?

import type { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/IndexPage.vue') },
{ path: 'admin', component: () => import('pages/AdminPage.vue') },
],
},
{
path: '/admin',
component: () => import('layouts/AnotherAdminPage.vue'),
},
// Always leave this as last one,
// but you can also remove it
{
path: '/:catchAll(.)',
component: () => import('pages/ErrorNotFound.vue'),
},
]
export default routes;

Which of AnotherAdminPage or AdminPage will be mounted and why?

In other words: what is the precedence when choosing routes?