Как изменить вложенность компонентов?

Question

[okkkman]

Всем привет.

Возникла следующая ошибка:

[Vue warn]: Error in v-on handler: "TypeError: _vm.$root.test is not a function"

found in

---> <MainLayout> at src/components/Layout/MainLayout.vue
       <Category> at src/components/Posts/Category.vue
         <App> at src/components/App.vue
           <Root>

Суть в том, что я пытаюсь обратиться из компонентов к родительской функции, однако мой App компонент находится внутри MainLayout, что не есть хорошо.
Как мне инициализировать Vue, чтобы вложенность компонентов получилась следующей:
App > MainLayout > Category

main.js:

import './assets/scss/main.scss'

import Vue from 'vue'
import App from './components/App'
import router from './router'
import store from './store'
import axios from 'axios'

const vm = new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

App.vue:

export default {
        name: "App",

        data() {
            return {}
        },
        methods: {
            test() {
                console.log('test')
            }
        }
    }

Comments

[Дмитрий]

если я правильно понял, то вы в компоненте mainlayout хотите вызвать функцию test из app?
так не получится по идее. взаимодействие между компонентами через event bus или vuex
плюс проверьте регистрацию компонентов.
components: {
....
}

[Дмитрий]

Обычно я так делал.
App.vue это просто инициализаци проекта и содержит только router-view.

<div id="app">
    <router-view/>
 </div>

в router.js
import MainLayout from ...
в роутах
{
path: '/',
name: 'MainLayout',
component: MainLayout
},

...

Ну а дальше уже в MainLayout импортируете categories, регистрируете их в components.
Мне кажется в вашем случае такая последовательность должна быть