How to retrieve data from vue component in another component?

Question

There is a vue royter

.....
const Edit = Vue.component('edit', require('./components/pages/edit.vue'));
const Product_category = Vue.component('home', require('./components/pages/product_categories.vue'));

const routes = [
    ........
    {
        path: '/product_categories',
        name: 'product_categories',
        component: Product_category
    },
    {
        path: '/product_categories/edit/:id',
        name: 'product_categories_edit',
        components: {default: Edit, entity: Product_category},
        props: {default: true, entity: true}
    }
];

How can I get data in component Product_category componate Edit?

<script>
export default {
    props: ['id', 'entity'],
    mounted: function () {
        console.log('Admin edit page mounted.');
        console.log(this.entity); // Eror
        console.log(entity); // Eror
        this.getData();
    },
}
</script>

A direct appeal is not suitable, because each router will have its own entity.

Answer 1

Use vuex if you prefer a global state-object. It's properties can be mapped to each instance and component https://github.com/vuejs/vuex

If you prefer an event based approach use an event bus https://alligator.io/vuejs/global-event-bus/

It is all well described at multiple positions in the official vuejs documentation.