How to access current route name from App.vue in Vue 3 script setup

Question

I'm having trouble with getting current route name in App.vue in Vue3 script setup.

I would like to get the current route name and check if it matches some conditions.

The route is /login. and the file where I wrote codes to check the route is App.vue.

First, I tried router.currentRoute.value.name, which is supposed to return the current route name. But all I got was "/", instead of "login". When I write this code in template, it shows the current route ("login"). Also when I write this code in Login.vue (the file RouterView is showing), it shows the current route name.

App.vue

<script setup>
import { RouterView, useRouter, useRoute } from "vue-router";
import Navigation from "./components/Navigation.vue";
import Footer from "./components/Footer.vue";
import { onMounted } from "vue";


const navigationDisabled = ref(null);
const router = useRouter();
const route = useRoute();


const checkRoute = () => {
  if (
    router.currentRoute.value.name === "login" ||
    router.currentRoute.value.name === "register" ||
    router.currentRoute.value.name === "forgot-password"
  ) {
    navigationDisabled.value = true;
    // console.log(router.currentRoute.value.name);
    return;
  }
  navigationDisabled.value = false;
};

onMounted(() => {
  checkRoute();
})

console.log(router.currentRoute.value.path);

</script>

<template>
  <div class="app-wrapper">
    <div class="app">
      <Navigation />
      <RouterView />
      <Footer />
      <p>{{ route.name }}</p>  //This works.
      <p>{{ router.currentRoute.value.name }}</p> //This also works.
    </div>
  </div>
</template>

I also tried route.name, which showed the same result as the first one.

How can I access the current route name from App.vue?