communications between siblings (Vue+Laravel Form)

I have send statusand user_id as a props form parent to one sibling. Now i want to transfer samething to another sibling.

I Have simple 3 multistep form:form1, form2 and form3 In form1 i have login information,form2 consist personal information and form3 has career information.

i have 3 tables namely users to insert login information from form1, profiles table to store personal information from form2 and careers table to store careeer information.

In first step after completion of form1,i will grab his email,find id(user_id)last inserted id,hide form1, pass form2 status(true status) and user_id to form2 as props.

In step2 now form1 and form3 is hidden,form2 is display. Now i can save form2 information because i have user_id as props and my form2 status is true.

problem:After completion of form2, my form3 should be displayed.so i have to pass form3 status(true status) and user_id after successfull insertion of form2 data,probably raising an event. I did but my form3 is not displayed after form2 completion.

My first component is Employee.vue consist login information, 2nd is Employee2.vue consist personal info,3rd is Employee3.vue consist career info.

in index.blade.php i have

 <employee>     </employee>//first form

Employee.vue

<template>

//SENDING DATA to FORM2(employee2)
    <employee2 :form2="form2" :user_id="user_id" "></employee2>


    <form action="#" id="loginInfo" v-if="form1">


       <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" name="username" v-model="loginUserInfo.username" class="form-control">
            <p v-if="error.username">
                <span v-for="err in error.username" class="label label-danger">
                </span>
        </p>

        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="text" name="email" v-model="loginUserInfo.email" class="form-control">
            <p v-if="error.email">
                <span v-for="err in error.email" class="label label-danger">
            </span>
            </p>
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" name="password" v-model="loginUserInfo.password" class="form-control">
            <p v-if="error.password" class="list-unstyled">
                <span v-for="err in error.password" class="label label-danger"></span>
            </p>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success"@click.prevent="loginInfo">Continue</button>
        </div>
    </form>






    </div>
    <!--end of col-md-8-->

</template>


<script>
    export default{
        data(){
            return{
                error:[],

                success:false,
                form1:true,
                form2:false,
                form3:false,

                loginUserInfo:
                {
                    username:'',
                    email:'',
                    password:'',
                },

                user_id:'',


            }
        },
        methods:{
                loginInfo()
                {
                    axios.post('/employee/create',this.loginUserInfo)
                        .then((response)=>{
                            console.log(response.data);
                            this.user_id =  response.data;
                            this.form1 = false;//disaplying form1
                            this.form2 = true;//enabling form2



                    }).catch(error=>{
                        this.error = error.response.data
                    });
                },

            }


    }
</script>

form2

Employee2.vue

<!--Form2-->
<template>


    <form action="#"  v-if="form2">


        <h1>Personal Information</h1>
        <small>The field marked with * refers to required information!</small>

        <div class="form-group">
            <div class="col-md-4">
            <label>First name *:</label>
                <input type="text" name="first_name" v-model="personalInfo.first_name" class="form-control">
                <p v-if="error.first_name" class="list-unstyled">
                    <span v-for="err in error.first_name" class="label label-danger"></span>
                </p>
            </div>
        </div>

            //..................

    <div class="form-group">

        <button class="btn btn-success" @click.prevent="personalInfoCreate">Continue</button>
    </div>

</form>

</template>
<script>
import Bus from '../../bus.js'
    export default{

        props:['form2','user_id'],
        data(){
            return{
                error:[],

                success:false,
            //  form3:false,




                personalInfo:
                {
                    first_name:'',

                },


            }
        },
        methods:{

            personalInfoCreate(){

                axios.post('/employee/personalInfo/create/' + this.user_id,this.personalInfo) 
                       .then((response) => {
                    console.log(response)
                    this.form2 = false;//disabling form2

                       this.form3 = true;//enabling form3

                    Bus.$emit('form3',this.form3)  //passing form3 status as event 

                 }).catch(error=>{
                    this.error = error.response.data
                 });
            },
            }


    }
</script>

Form3:

Employee3.vue

<template>
    <!--form3-->

      <form action="#" " v-if="form3">

        <div class="form-group">
            <label>Career Plan*</label>
            <textarea class="form-control" v-model="career.career_plan"></textarea>
        </div>



        <div class="form-group">
            <button type="submit" class="btn btn-success" @click.prevent="careerInfo">Continue</button>
        </div>


      </form>       

</template>

<script>
import Bus from '../../bus.js'

    export default{

        data(){
            return{
                error:[],



                career:
                {
                    career_plan:'',

                }
            }
        },
        methods:{



            careerInfo() {

            },
            created(){
                    Bus.$on('form3',(data)=>{
                        this.form3=data;  // to enable form3 after completion of form2

                    })
                }



    }
</script>

I havebus.jsin Components directory

import Vue from 'vue'

export default new Vue()

My question is how can i pass form3 status(true) and user_id from Employee2.vue(form2) to Employee3.vue(form3). I did like above it worked upto Employee2.vue but after completion of form2(Employee2.vue) form3 is not shown/invisible. I also got warning props should not be used directly instead use computed property after submission of form2

via Chebli Mohamed