In my Vue.js project, I have been using the .vue component specs format to write components. An interesting observation I made is that plain JavaScript can export these components when loaded from vue files. For instance, a component defined in index.vue can be exported from index.js. Currently, I am attempting to export multiple components from index.js but running into issues. When I import the multiple components, they do not render. However, if I import the index.js as a single object and then extract the components, it works perfectly fine. Why is it that I am unable to extract multiple components from index?
index.js
import A from './A.vue';
import B from './A.vue';
export default { A, B };
home.vue
<script>
import Main from "../common/forms";
const { A, B } = Main; // Works
// import { A, B } from "../common/forms"; // Not Working
export default {
name: 'app-home',
components:{ A, B}
}
</script>
<template>
<div id="app-home">
<h1>App Home </h1>
<A />
<B/>
</div>
</template>