Vue RouterLink not working inside a component - vue.js

Question

I have a very simple vue 3 project. In created a Layout component that has the navigation links which looks like this
<script setup>
import { useRouter } from "vue-router";
</script>
<template>
<div>
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
<div
class="flex-1 flex flex-col min-h-0 border-r border-gray-200 bg-white"
>
<div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4">
<h1 class="text-3xl font-extrabold text-gray-900">MiniSend</h1>
</div>
<nav class="mt-5 flex-1 px-4 bg-white space-y-2">
<ul>
<li class="mb-4">
<RouterLink to="/dashboard" class="text-gray-700">
Dashboard</RouterLink
>
</li>
<li class="mb-4">
<RouterLink to="/settings" class="text-gray-700">
Settings</RouterLink
>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md:pl-64 flex flex-col flex-1">
<main class="flex-1">
<div class="py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-2xl font-semibold text-gray-900">
<slot name="pageTitle"></slot>
</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div class="py-4">
<slot></slot>
</div>
</div>
</div>
</main>
</div>
</div>
</template>
In my Dashboard view I imported the Layout component as seen below
<script setup>
import Layout from "../components/Layout.vue";
</script>
<template>
<Layout>
// ...content
</Layout>
</template>
When the Dashboard view is served, I can see the links but I cannot click the links. I copied the same link code into the Dashboard view file and I was able to click and get routed to the right page.
Why are the links not working inside the component but work inside the view?