Vue 3 components not importing other vue components

Question

My Vue component navbar.vue does not import other components.
This is Vue 3 with the Option API.
All of the components are imported by index.js in the component folder

import navbar from '@/components/navbar.vue'
import btn from '@/components/btn.vue'

export {
  navbar,
  btn
}

This is the navbar.vue :

<template>
  <header class="navbar">
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
      <li>
        <btn></btn>
      </li>
    </ul>
  </header>
</template>

<script>
import { btn } from '@/components'

export default {
  name: 'navbar',
  components: {
    btn
  }
}
</script>

This is the btn.vue components:

<template>
  <button class="btn" @click="$emit('click')">
    <slot/>
  </button>
</template>

<script>
export default {
  name: 'btn'
}
</script>

Answer 1

Your index.js exported navbar and btn . And also you have already exported another component from navbar.vue in same file level. So make a separate folder for navbar and btn or change the export name. I am new to frameworks. Hope this will work.