Unknown custom element vuejs nuxtjs

I am getting an error

Would like to know what am i doing wrong. I want to make reusable components starting with for ex.: a button. I make it in a file path: /components/MusicPlayer.vue:

<template>
  <div>
    <v-btn @click="playMusic">
      I am a button
    </v-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      test: require('@/assets/YES.mp3')
    }
  },
  methods: {
    playMusic () {
      const pav = new Audio(this.test)
      pav.play()
    }
  }
}
</script>

<style>
#MusicPlayer{
    background: red;
}
</style>

And then i try to import and export as needed in my Layout path /layouts/LoggedIn.vue:

<template>
  <v-app id="Logged-In-Layout">
    <transition
      name="view"
    >
      <router-view />
    </transition>
    ...  <- some code -> ...
    </v-app-bar>
    <v-btn id="scroll-to-top-btn" fab color="pink" @click="scrollToTop">
      <v-icon>mdi-arrow-up-bold-outline</v-icon>
    </v-btn>
    <Player id="ricardo" />     <--- my custom component here.
  </v-app>
</template>
<script>
import { MusicPlayer } from '@/components/MusicPlayer.vue'
export default {
  components: {
    Player: MusicPlayer
  },
  data: () => ({
    dialog: false,
    drawer: false
  }),
  methods: {
    scrollToTop () {
      window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

It doesnt matter if i put Player: MusicPlayer or 'otherName': MusicPlayer or even just MusicPlayer, still does'nt work. And the button which has to appear is 0x0 px. Tried wrapping in a

<div> <Player /> </div>