Смешайте vue компонентов в несколько финальных js файлов в приложении Laravel

Question

Я работаю над приложением Laravel с Vue. В настоящее время у меня есть один основной Vue экземпляр / файл (пример ниже), в который я импортирую много компонентов, а затем смешиваю все это в один app.js файл.

import AccountUsers from "./components/management/AccountUsers";
import AccountCompanies from "./components/management/AccountCompanies";
import AccountProperties from "./components/management/AccountProperties";
........

new Vue({
    el: '#app',
    components: {AccountUsers, AccountCompanies, AccountProperties,......},
});

В Laravel application, будут области приложения, к которым какой-то пользователь будет обращаться редко или вообще не будет. Например, Административная зона. Я хотел бы объединить модули Администрирования Vue в отдельный файл administration-area.js, чтобы основной файл app.js был легче, так как он будет использоваться всеми пользователями.

В идеале, я хотел бы есть еще один administration-area.js, который будет смешан с administration-area.js

import Roles from "./components/administration/Roles";
import Permissions from "./components/administration/Permissions";
import Pages from "./components/administration/Pages";
........

new Vue({
    el: '#app',
    components: {Roles, Permissions, Pages,......},
});

Таким образом, все страницы в приложении будут иметь:

app.js

Но область администрирования будет включать два файла:

app.js
administration-area.js

Я попытался сделать так, как описано выше, он работает, но я получаю Warning, также все vue components имеют name attribute.

[Vue warn]: Unknown custom element: <roles> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Что бы быть рекомендуемым способом разделить vue components на разные окончательные js файлы? Спасибо.