I created a new Vue project using the router via npm init vue@latest. During startup I want to get the hash from the url, but I can't read it during startup.

For reproduction purposes I modified the App.vue file to

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref } from "vue";

const hashFromRoute = ref("");
const hashFromWindow = ref("");

const route = useRoute();
hashFromRoute.value = route.hash.substring(1);

hashFromWindow.value = window.location.hash.substring(1);
</script>

<template>
  <div>
    <div>Hash from route: {{ hashFromRoute }}</div>
    <div>Hash from window: {{ hashFromWindow }}</div>
  </div>
  <!-- ... render router view here ... -->
</template>

and run the app with a sample hash http://localhost:3000/#foo=bar

The hash from the route is empty, the hash from the window is set. I think this is because the call in the App.vue file is too early? Do I have to use window here or is there a way to "wait" until the Vue instance is ready to read it?