vue-router with hash routing fails silently

Description

I have configured the vue-router according to the instructions on wails.io.

Relevant files:

main.js

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import './index.css'
import VueFeather from 'vue-feather'

const app = createApp(App)
app.component(VueFeather.name, VueFeather)
app.use(router)
app.mount('#app');

router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../App.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/settings",
    name: "Settings",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function () {
      return import(/* webpackChunkName: "settings" */ "../Settings.vue");
    },
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

App.vue

<script setup>

</script>

<script>
export default {
  name: 'App',
  components: {},
  methods: {
      pushToHome () {
      this.$router.push("/")
    },
    pushToSettings () {
      this.$router.push("/settings")
    }
  }
}
</script>

<template>
  <div class="flex">
    <div class="flex-none h-screen w-48 mr-1 bg-white dark:bg-zinc-900 shadow-xl">
      <div class="m-2 text-2xl subpixel-antialiased font-bold text-center">
        Papyri
        <span class="text-xs font-semibold inline-block py-1 px-1 align-middle uppercase rounded text-emerald-600 bg-emerald-200 uppercase last:mr-0 mr-1">
          beta
        </span>
      </div>
      <div class="p-2 hover:bg-zinc-800 w-full" role="link" @click="pushToHome()">
        <span class="inline-block mr-1 align-middle">
          <vue-feather type="settings" />
        </span>
        <span>Home</span>
      </div>
      <div class="p-2 hover:bg-zinc-800 w-full">
        <span class="inline-block mr-1 align-middle" role="link" @click="pushToSettings()">
          <vue-feather type="settings" />
        </span>
        <span>Settings</span>
      </div>
    </div>
    <div class="flex-auto m-1">
      This is content.
    </div>
  </div>
</template>

<style>

</style>

I'm using the push API because I couldn't figure out the component API for router-link on devs. There are no errors shown, everything compiles. When I click a link it'll show up in the navigation, but nothing happens.

To Reproduce

Add vue-router
Configure vue-router with hash routing
Use the router API to navigate with push or <router-link (same API)

Expected behaviour

The application routes from one page to the next.

Screenshots

No response

Attempted Fixes