Не могу проверить route

Проблема следующая: пишу все на composition API. На страницах Login, Register, Reset необходимо НЕ показывать навигацию и футер, на остальных страницах показывать. В компонененте App.vue делаю проверку роута. Если login/register/reset, то присваиваю в стейт navigationDisabled значение true, а по условию v-if отрисовываю или не отрисовываю. Столкнулся с проблемой, что в composition API не достучаться до названию роута через $route.name, необходимо использоваться userRoute() из vue-router. Но useRoute() не успевает отработать, поэтому вызывается checkRoute() по onMounted(), в переменной navgiationDisabled ничего не оказывается. Если в vscode сделать сохранение и не перезагружать страничку, то на этот раз все отработает. Делаю вывод, что код не успевает достать название роута и сравнить его, как уже отрисовывается компонент. Как пофиксить это?

<template>
  <div class="app-wrapper">
    <div class="app">
      <Navigation v-if="!navigationDisabled" />
      <router-view />
      <Footer v-if="!navigationDisabled" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import Navigation from "./components/Navigation.vue";
import Footer from "./components/Footer.vue";

const navigationDisabled = ref(null);

const checkRoute = () => {
  if (
    useRoute().name === "Login" ||
    useRoute().name === "Register" ||
    useRoute().name === "Reset"
  ) {
    navigationDisabled.value = true;
    return;
  }
  navigationDisabled.value = false;
};

onMounted(() => {
  checkRoute();
});
</script>