Как расширить новое Vue ({}) в блейд-файлах

Question

У меня есть макет корневого / базового приложения с app.js (Laravel mixin), загружающим VueJS и mixin.

У меня есть раздел моего сайта, состоящий из блейд-разделов / включает в себя: main contentи sidebar

Итак, это настройка:

• Мой #app div находится в layouts / app.blade.php.
• Main contentявляется section из app.blade.php
• Боковая панель является компонентом лезвия внутри main content

Что мне нужно для достижения, так это чтобы у меня была «корневая» Vue икаждый клинок может (или нет) расширять это приложение Vue.

Мое решение до сих пор состоит в том, чтобы иметь Vue.extend в app.js:

let mixin = {...}

window.VueApp = Vue.extend({
    mixins: [mixin],
    data: function () {
        return {
            tax: 0.22
        }
    }
});

Затем в моем main content blade я расширяюVueApp

new VueApp({
  data:{
    registry:@json($accident->registry ?? []),
  },
  created(){
    //...
  },
  computed:{
    //...
  }
}).$mount('#app');

Проблема заключается в том, что, если я хочу также расширить его с боковой панели (который является другим файлом блейда), я не могу, поскольку у меня уже есть смонтированное приложение.

Есть ли способ иметь base VueApp с большим количеством блейдов, расширяющих его (не файлы компонентов .vue)?

Примерно так:

layout.blade.php: Vue с элементом #app

main.blade.php: Vue extзаканчивающийся #app элемент

sidebar.blade.php: он находится внутри main.blade и должен иметь элемент Vue, расширяющий #app