Vue-material components in the layout are not appearing inside Nuxt.js app

Question

I'm trying to create a Nuxt.js application using Vue Material as my UI library. I'm also using nuxt-vue-material to be able to use the components from Vue Material inside all of my .vue files and I'm looking to use a custom theme. With all of that my nuxt.config.js file looks like this

export default {
    /*
    ** Nuxt rendering mode
    ** See https://nuxtjs.org/api/configuration-mode
    */
    mode: 'universal',
    /*
    ** Nuxt target
    ** See https://nuxtjs.org/api/configuration-target
    */
    target: 'server',
    /*
    ** Headers of the page
    ** See https://nuxtjs.org/api/configuration-head
    */
    head: {
        title: process.env.npm_package_name || '',
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
            { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap' }
        ]
    },
    /*
    ** Global CSS
    */
    css: [
        '@assets/scss/reset.scss',
        'vue-material/dist/vue-material.min.css',
        'vue-material/dist/theme/default.css',
        '@assets/scss/global.scss',
        '@assets/scss/theme.scss',
    ],
    /*
    ** Plugins to load before mounting the App
    ** https://nuxtjs.org/guide/plugins
    */
    plugins: [
    ],
    /*
    ** Auto import components
    ** See https://nuxtjs.org/api/configuration-components
    */
    components: true,
    /*
    ** Nuxt.js dev-modules
    */
    buildModules: [
    ],
    /*
    ** Nuxt.js modules
    */
    modules: [
        // Doc: https://axios.nuxtjs.org/usage
        '@nuxtjs/axios',
        ['nuxt-vue-material', {
            theme: null,
            components: ['MdApp', 'MdContent', 'MdList', 'MdButton', 'MdToolbar',]
        }]
    ],
    /*
    ** Axios module configuration
    ** See https://axios.nuxtjs.org/options
    */
    axios: {},
    /*
    ** Build configuration
    ** See https://nuxtjs.org/api/configuration-build/
    */
    build: {
    }
}

My project structure looks like this:

What I'm trying to do is to add a simple layout where you have a header main content coming from the current page, footer.

My layouts/default.vue looks like this:

<template>
  <div class="page-container">
    <md-app>
      <app-header />
      <md-app-content>
        <nuxt keep-alive />
      </md-app-content>
      <app-footer />
    </md-app>
  </div>
</template>

<script>
import AppFooter from "~/components/app-footer";
import AppHeader from "~/components/app-header";

export default {
  name: "default-layout",
  components: {
    AppHeader,
    AppFooter
  }
};
</script>

<style scoped lang="scss">
  .md-app {
    height: 100%;
  }
</style>

So basically I'm just using the same structure as in the example docs of Vue Material for starting an app.

Inside components/app-header.vue I have the following code:

<template>
  <md-toolbar>
    <span class="md-title">Hi there</span>
  </md-toolbar>
</template>

<script>
export default {
  name: "app-header"
}
</script>

So it's basically just a wrapper for the <md-toolbar> component and my <app-footer/> currently just outputs <span>Footer goes here</span>, so nothing fancy there.

Finally I have my only page so far, in pages/index.vue, containing:

<template>
  <h1>Hi there I'm the backen.de Homepage</h1>
</template>

When running npm run dev, in the browser I see the following output:

So I get the output from <md-app>, and <md-content> but I can't see anything anywhere coming from <app-header> and <app-footer/>.

Now the strange thing is, if I move my <app-header/> from layouts/default.vue to pages/index.vue, like so:

<template>
  <div>
    <app-header />
    <h1>Hi there I'm the backen.de Homepage</h1>
  </div>
</template>

<script>
import AppFooter from "~/components/app-footer";
import AppHeader from "~/components/app-header";

export default {
  name: "index",
  components: {
    AppHeader
  }
};
</script>

Then I get the following result:

So I get the <md-toolbar> rendered inside the content coming from the current page, but this is of course not what I want, since I want the same toolbar on all of my pages (that's why I have the layout for).

My console shows no errors.

My package.json looks like this

{
  "name": "backen-nuxt-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  },
  "author": "Tamás Kuti",
  "license": "ISC",
  "dependencies": {
    "@nuxtjs/axios": "^5.12.2",
    "nuxt": "^2.14.6",
    "nuxt-vue-material": "^1.2.0",
    "vue-material": "^1.0.0-beta-15"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.7",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.3"
  }
}

Any ideas are appreciated, thanks!