Why isn't `RouterView` rendering any components?

Question

All components/screens render correctly if I insert them in the HTML manually, and the URL changes with no errors, but no content is shown in <RouterView>. Thank you.

main.ts

import { createApp, VueElement } from 'vue';
import {router} from './data/router';
import AppWidget from './widgets/app.vue';
import * as types from './data/types';

globalThis.__VUE_OPTIONS_API__ = (process.env.NODE_ENV === "development") as unknown as string;
globalThis.__VUE_PROD_DEVTOOLS__ = (process.env.NODE_ENV === "development") as unknown as string;

const app = createApp(AppWidget);
app.use(router);
const root = app.mount(`.app`);

router.ts

import { createRouter, createWebHistory } from 'vue-router';
import * as constants from './settings';
import Home from '../widgets/home.vue';
import JournalScreen from '../widgets/journal/journalScreen.vue';

export const router = createRouter(
{
    history: createWebHistory(),
    routes:
    [
        { path: '/',                                    name: 'home',                               component: Home },
        { path: '/journal',                             name: 'journal',                            component: JournalScreen }
    ]
});

app.vue

<!-- JS ----------------------------------------------------->
<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router';
import {router} from '../data/router';
import JournalScreen from './journal/journalScreen.vue';

router.push('/journal');

</script>

<!-- HTML ----------------------------------------------------->
<template>  
    <RouterView >       
    </RouterView>
</template>

journal.vue

<!-- JS ----------------------------------------------------->
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';
import * as types from '../../data/types';
import * as helper from '../../logic/helper';
import {state} from '../../data/state';
import JournalEntry from './journalEntry.vue';
import SignIn from '../io/dropboxSignin.vue';
import SaveToCloud from '../io/save.vue';

function mounted() {console.log('here');} //does not fire
</script>

<!-- HTML ----------------------------------------------------->
<template>
    <sign-in></sign-in> 
    <div>
        Entries
    </div>
    <div v-for="item in state.entries">
        <journal-entry :entry="item" :key="item.id"></journal-entry>
        <br />
    </div>
</template>

Answer 1

I found the problem. I didn't post all my commented code in the question because I thought it was irrelevant, but it turns out that if you have a commented line inside RouterView it doesn't render anything.

Once I changed

<RouterView>
    <!-- <RouterLink to="/hi">Go to Hi page</RouterLink> -->
</RouterView>

to

<RouterView>
</RouterView>

everything worked. I've logged a bug on the Vue site for this.