Component incorrectly outputting content from other component - vue.js

Question

I am using Gridsome for the first time. I am just trying to setup the layout of my website - I don't have any API connected or anything, just trying to output raw HTML. I have a SkipToContent component and a Header component. Both are outputting the contents of the Header component, and I'm rather confused. I've tried restarting the local server and general debugging stuff like making sure the files are all saved. Below are the files:
Header.vue
<template>
<header class="header">
<strong>
<g-link to="/">{{ $static.metadata.siteName }}</g-link>
</strong>
<nav class="nav">
<g-link class="nav__link" to="/">Home</g-link>
<g-link class="nav__link" to="/about/">About</g-link>
<g-link class="nav__link" to="/web/">Web Development</g-link>
<g-link class="nav__link" to="/photography/">Photography</g-link>
</nav>
</header>
</template>
<script lang="ts">
import Vue from "vue";
export default class Header extends Vue {}
</script>
<static-query>
query {
metadata {
siteName
}
}
</static-query>
<style lang="scss">
#use '../styles/common' as *;
</style>
SkipToContent.vue
<template>
Skip to content
</template>
<script lang="ts">
import Vue from 'vue';
export default class SkipToContent extends Vue {}
</script>
<static-query>
query {
metadata {
siteName
}
}
</static-query>
<style lang="scss">
#use '../styles/common' as *;
.skip-to-content {
&__link {
position: fixed;
left: 50%;
transform: translate(-50%, -200%);
transition: transform 0.15s ease;
background: $primary;
&:focus {
transform: translate(-50%, 50%);
}
}
}
</style>
Default.vue
<template>
<div class="layout">
<SkipToContent />
<Header />
<main id="main-content">
<slot />
</main>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import SkipToContent from "~/components/SkipToContent.vue";
import Header from "~/components/Header.vue";
import { Component } from "vue-property-decorator";
#Component({
components: {
Header,
SkipToContent,
}
})
export default class App extends Vue {
};
</script>
<static-query>
query {
metadata {
siteName
}
}
</static-query>
<style lang="scss">
#use '../styles/common' as *;
#import url("https://rsms.me/inter/inter.css");
html {
font-family: "Inter", sans-serif;
}
#supports (font-variation-settings: normal) {
html {
font-family: "Inter var", sans-serif;
}
}
</style>
HTML Output:
I feel like I'm either doing something very obvious incorrectly, or this is some sort of issue with using TypeScript in Gridsome?
Thanks for any suggestions :)