How to properly store and use individual Vue components on the site pages?

Question

Vue.js

There is a project that uses Vue to implement complex forms, notifications, a comment system, and other elements (which are separate components and are only placed on a certain number of pages).

At the moment I have a vue.app.js file with something like this:

vue.app.js

window.Vue = require('vue');
import './util/directives.js'
import store from './store/index.js'
import Vue from 'vue';
import Reviews from './components/Reviews.vue';
import Comments from './components/Comments.vue';
import Searchbox from './components/Searchbox.vue';
import CommentForm from './components/CommentForm.vue';
import ReviewForm from './components/ReviewForm.vue';
import NotificationsWidget from './components/NotificationsWidget.vue';
import Notifications from './components/Notifications.vue';
import AddResourceForm from './components/AddResourceForm.vue';
if ($('#reviews').length > 0) {
    new Vue({
      el: '#reviews',
      store,
      components: {
        Reviews
      },
    });
  }
// other code

It can be seen from the code that, for example, a block with reviews of some material is embedded like this:

<div id="reviews">
     <reviews/>
</div>

There are several types of forms that, by analogy, are connected to the site:

Connection code

if ($('#add-resource-widget').length > 0) {
      new Vue({
        el: '#add-resource-widget',
        store,
        components: {
          'add-resource-form' : AddResourceForm
        },
      });
    }

And the html code itself:

<div id="add-resource-widget">
      <add-resource-form></add-resource-form>
</div>

I'm a little dissatisfied with such noodles in the code, and for this reason the question arose. What practices are used to separate individual components into their own files, with the further connection of this file on the page where it is really needed?

That is, it is possible to connect a bundle with directives, Store. And then on the necessary pages, connect individual components that are needed only on this page. Does it make sense? As far as I know, it is better for the server to send a request to download one file than, for example, 10.

Answer 1

Yes, you should not bother with separating components into separate files.
Collect one bundle. At least while it is definitely not worth less than 200-300kb.
Then you can use the built-in webpack code splitter / For example, through magic comments
I mount the components themselves like this
<div id="calculator"></div>

export function mountVueComponent(targetId, component) {
    if (document.getElementById(targetId)) {
        new (Vue.extend(component))().$mount(`#${targetId}`);
    }
}

import Calculator from '....';
mountVueComponent('calculator', Calculator);

Or so
<div class="mini-calc"></div>

Array.from(document.querySelectorAll('.mini-calc')).forEach(el => {
    let yandexGoal = el.dataset['goal'];
    new Vue({
        el    : el,
        render: createElement => createElement(Calculator, {
            props: {
                displayAs: CALC_DISPLAY_AS_MINI,
                yandexGoal,
            },
        }),
    });
});