How to change component nesting?

Question

JavaScript

Hello.

The following error occurred:

[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>

The bottom line is that I'm trying to access the parent function from the components, but my App component is inside the MainLayout, which is not good.
How do I initialize Vue so that the component nesting is:
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')
            }
        }
    }