Vue3: Programmatically pushing to route via name property causes error

I am working through this tutorial: https://www.digitalocean.com/community/tutorials/how-to-navigate-between-views-with-vue-router#conclusion

Eventually it is possible to call a specific airport via a link like this: http://127.0.0.1:5173/airports/cvg and some more details via http://127.0.0.1:5173/airports/cvg/destinations

Close to the end of the aforementioned tutorial a fallback call to a 404 page is implemented, should the route not exist, e.g. this should redirect to 404: http://127.0.0.1:5173/airports/cvgTHIS_DOES_NOT_EXIST

The routes look like this:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/pages/HomePage.vue'),
  },
  {
    path: '/about',
    name: "About",
    component: () => import('@/pages/AboutPage.vue'),
  },
  {
    path: '/airports',
    name: "Airports",
    component: () => import('@/pages/AirportsPage.vue'),
  },
  {
    path: '/airports/:code',
    name: "AirportDetail",
    component: () => import('@/pages/AirportDetail.vue'),
    children: [
      {
        path: 'destinations',
        name: 'AirportDestinations',
        component: () => import('@/pages/AirportDestinations.vue'),
      }
    ]
  },
  {
    path: '/:catchAll(.*)*',
    name: 'PageNotFound',
    component: () => import('@/pages/PageNotFound.vue')
  }
]

The fallback call to 404 is implemented in AirportDetail.vue's onMounted using the route's name property:

[...]
const airport = computed(() => {
  return airports.filter(a => a.abbreviation === route.params.code.toUpperCase())[0]
})

onBeforeMount(() => {
  if (!airport.value) {
    router.push({ name: 'PageNotFound' })
  }
})

However, I get warnings and errors like these:

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of render function 
  at <AirportDetail onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>
warn2 @ runtime-core.esm-bundler.js:38
[...]

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <AirportDetail onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

AirportDetail.vue:3 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
    at Proxy._sfc_render (AirportDetail.vue:3:20)
    [...]

Here is a codesandbox:

https://codesandbox.io/s/sweet-roentgen-idg8yf

and the github repo:

https://github.com/rowild/vue3-airports-tutorial

Calling 404 works in all other cases, just not in this one. Any idea why router.push(...) is not working in this particular case?