How to use global variable in parent component and 3 child component in Vue js

You will need 2 things

1. To pass a property to the components in order to know the current step value

2. To emit an event from each component so the parent component will get notified about the new value that the step should be updated

I write the code below and give the explanation later

Your html

 <div id="app">
 </div>

Parent Component

 var instance = new Vue({
   el:'#app',
   data:{
     step:1
   },
   methods:{
     stepChanged:function(step){
       alert('Moving to step:'+step);
      this.step = step;
    }
  },
  template:`
  <div>
 <app-stepone v-if="step==1" v-on:stepChanged="stepChanged" :step="step" > 
  </app-stepone>

 <app-steptwo v-if="step==2" v-on:stepChanged="stepChanged" :step="step" > 
 </app-steptwo>

 <app-stepthree v-if="step==3" v-on:stepChanged="stepChanged" :step="step"> 
 </app-stepthree>
 </div>
 `
  });

Step 1 component

  Vue.component('app-stepone',{
   props:['step'],
   data:function(){
   return {};
  },
   methods:{
    moveStep(){
     this.$emit('stepChanged',2)
   }
  },
   template:`<div>We are in Step 1 - {{step}}<br /><button v- 
    on:click="moveStep()">Move to Step 2</button></div>`
 });

Step 2 Component

 Vue.component('app-steptwo',{
   props:['step'],
   data:function(){
    return {};
  },
  methods:{
    moveStep(){
      this.$emit('stepChanged',3)
   }
  },
  template:`<div>We are in Step 2 - {{step}}<br /><button v- 
 on:click="moveStep">Move to Step 3</button></div>`
 });

Step 3 Component

Vue.component('app-stepthree',{
  props:['step'],
  data:function(){
   return {};
 },
  methods:{
   moveStep(){
     this.$emit('stepChanged',1)
  }
 },
 template:`<div>We are in Step 3 - {{step}}
   <br />
    <button v-on:click="moveStep">Move to first step</button>
    </div>`
});

Each component can receive the step property from the parent by just passing to it with the name :step="step" and registering a props:['step'] in every app-step component and then inside the step component you can use this property and know the current value (in the current example i do not use it, but i show how you can receive it ) Each component after it does its calculation or whatever your business logic is, can emit to the parent the change that would like to be applied for the step. The component should notify the parent by running this command this.$emit('stepChanged','<value of the step>') . In order for the parent component to listen for the change, it should register to each component a handler that will have the name 'stepChanged' and the method that will be called