best practice for passing data from one Vue.js component to another in Laravel

I have two components of Vue.js. I created two separate components for a single form in order to avoid a messy and complex code structure. I want to combine the data of these two forms in order to send it to the server. Here is my blade file which contains two components. One is StudentComponent.vue and second is TeacherComponent.vue.

    @extends('layouts.app')
    @section('content')
    <div class="main-content" id="panel">
        <main class="col-12 col-md-8 col-xl-7 py-md-3 pl-md-5 ct-content" role="main">
            <div id="app">
                <teacher-component :foods_array="{{ json_encode($foods) }}"></teacher-component>
                <student-component :foods_array="{{ json_encode($foods) }}"></student-component>
            </div>
        </main>
    </div>
    @endsection

Remember that these components (StudentComponent and TeacherComponent) hierarchy does not have a parent-child component relation. My goal is to get the data from the teacher component to the student component. How can I achieve this goal?

My StudentComponent.vue

    <template>
        <div>
            <div class="card" style="width: 172%;">
                <!-- Form Fields -->
            </div>
        </div>
    </template>
    
    <script>
        export default {
            props : {
                foods_array: {
                    type: Array,
                    required: true
                }
            },
            beforeMount: function () {
                this.foods = this.foods.concat(this.foods_array); 
            },
            data() {
                return {
                    student: {
                        email: '',
                        name: '',
                        roll_number:null,
                        food: null,
                        checked: []
                    },
                    foods: [{ text: 'Select One', value: null }],
                    show: true
                }
            },
            methods: {
                onSubmit(evt) {
                    evt.preventDefault()
                    axios.post('api/food/store'{student:JSON.stringify(this.student),role:'student'})
                    .then(function (response) {
                        console.log(response);
                     })
                     .catch(function (error) {
                        console.log(error);
                     });
                },
             }
        }
   </script>
     

My TeacherComponent.vue

    <template>
        <div>
            <div class="card" style="width: 172%;">
                <!-- Form Fields -->
            </div>
        </div>
    </template>
    
    <script>
        export default {
            props : {
                foods_array: {
                    type: Array,
                    required: true
                }
            },
            beforeMount: function () {
                this.foods = this.foods.concat(this.foods_array); 
            },
            data() {
                return {
                    teacher: {
                        email: '',
                        name: '',
                        department:'',
                        food: null,
                        checked: []
                    },
                    foods: [{ text: 'Select One', value: null }],
                    show: true
                }
            },
            methods: {
                onSubmit(evt) {
                    evt.preventDefault()
                    axios.post('api/food/store'{student:JSON.stringify(this.student),role:'teacher'})
                    .then(function (response) {
                        console.log(response);
                     })
                     .catch(function (error) {
                        console.log(error);
                     });
                },
             }
        }
   </script>