Ability to have more then one main js file for vue

I'm not sure in which category this falls in, but what I'm trying to do is have the ability to have more then one main js file and what I mean by that is, instead of having all my components being called in the app.js file I want to be able to call it in a different one.

For example I have 2 folders in my resources/js folder, one is called posts and the other is called users. And in those folders they have their own main js file. for posts it has main-post.js and in that file it has

Vue.component('index', require('./posts/Index.vue').default);


if (document.getElementById('main-post-app')) {
    const app = new Vue({
        el: "#main-post-app",
        data() {
            return {
                bus: new Vue(),
            }
        },
        methods: {

        },
        mounted() {

        }
    });
}

and I have a similar one for users it just says user instead of post.

In my blade file I have

<div id="main-post-app">
    <index></index>
</div>

and the only thing I have in that file is

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

Now the problem I'm having is that my component isn't showing up and I'm not sure where I've gone wrong.

In my app.js file I have this

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

import './bootstrap';
import { createApp } from 'vue';

/**
 * Next, we will create a fresh Vue application instance. You may then begin
 * registering components with the application instance so they are ready
 * to use in your application's views. An example is included for you.
 */

const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
//     app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
// });

/**
 * Finally, we will attach the application instance to a HTML element with
 * an "id" attribute of "app". This element is included with the "auth"
 * scaffolding. Otherwise, you will need to add an element yourself.
 */

app.mount('#app');

and in my header section where I'm calling the js files I have this

@vite(['resources/sass/main.scss', 'resources/js/app.js', 'resources/js/main-post.js'])

I hope I was able to make sense.