Vue two same-level components to achieve value transfer

<div id='app'>
 <children1></children1>
 <children2></children2>
</div>
<script>
  var children1 = {};
  var children2 = {};
 var vm = new Vue({
  el:'#app',
  components:{
   children1,
   children2
  }
 })
</script>

 <div id='app'>
  <children1></children1>
  <children2></children2>
 </div>
 <script>
     var Event = new Vue({}); // Create a vue instance to be used as a medium for value transfer var children1 = {
   template:`
    <div>
     <button @click='send'>Click me to send data to children2 component</button>
    </div>
   `,
   data(){
    return {
     msg:'I want to send data to children2'
    }
   },
   methods:{
    send(){ 
     Event.$emit('go',this.msg) 
    }
   }
  };
   var children2 = {
   template:`
    <div>
     <h2>Value received from children1 component: {{msg1}}</h2>  
    </div>
   `,
   data(){
    return {
     msg1:''
    }
   },
   created(){
    Event.$on('go',(v) => { // Must use arrow function because this
     this.msg1 = v;
    })
   }
  };
  var vm = new Vue({
   el:'#app',
   components:{
    children1,
    children2
   }
  })
</script>