How to fix `Invalid component name` when changing page with custom layout in nuxt?

Question

[Vue warn]: Invalid component name: "layouts/default.vue". Component names should conform to valid custom element name in html5 specification.

As you ca see in above error I'm facing a problem when i used custom layout for my Auth page. Problem is when i go to Auth page with custom layout, i don't get any error, but anytime i try to back from Auth page, I'll get above error. when i do success login/register or just hit Back button I'll get that warning on loading homepage

Here's default layout which is located in default place when nuxt installed :

<template>
      <v-main>
            <v-flex>
              <Nuxt />
            </v-flex>
      </v-main>
</template>

<script>
  export default {
    components: {AppHeader, AppFooter},
    async fetch () {
      try {
        const layout= await this.$axios.$get('/app')
        this.app= layout;
      } catch (e) {
        console.log(e)
      }
    },
    data() {
      return{
        app: null,
      }
    }
  }
</script>

Answer 1

I managed to fix this by adding name attribute to the layout...

layouts/default.vue

 export default {
  name: "default"
  ...
}

And the error is gone