[Vuejs]-How to pass a variable to a different component in the same level with Vue.js

I would suggest that when two sibling components need to ‘communicate’, a parent component should ‘facilitate’. The report component may emit an event that will inform the parent, then the parent performs an action/sets a property to enable the table component to display.

In your case (laravel) the parent component is the Vue instance that’s probably defined in resources/js/app.js (this Vue instance that targets”). I would not advice you to use this global instance for this page-specific functionality, because you probably have more pages. Instead you’d better create a new component that will be the parent and call this component in your page/blade.

Some snippets to clarify the possible solution:

@extends('layouts.app')

@section('content')
<div class="container">
    <div id="app">
        <reporter-app></reporter-app>
    </div>
</div>
@endsection

// reporter-app.vue
<template>
   <div>
        <!-- listen for `success` events from report-meeting -->
        <report-meeting @success="displayTable=true"></report-meeting>
        <hr>
        <!-- only displays when displayTable == true -->
        <table-report v-if="displayTable"></table-report>
   </div>
   ....
</template>

// report-meeting.
runReport: function() {
            axios.get('api/get_report', this.formReport)
            .then((response) => {
               ...
               ...
               this.$emit('success')
            })
}

I hope this clarifies it a bit.