title: passing "ref" between child components without click event Vue js
body: <p>I have two sibling components one has a form and the submit button is in the next component. I wanna pass ValidateObserver (from vee-validate) as a ref to other child component. And I use global Eventhub to communicate between sibling components.</p>
  <pre><code>// Component A
      &lt;template&gt;
          &lt;ValidationObserver v-slot=&quot;{ handleSubmit }&quot; ref=&quot;FullForm&quot;&gt;
            &lt;form @submit.prevent=&quot;handleSubmit(buildingForm)&quot;&gt;
      &lt;/template&gt;
  
  methods:{             
  
          buildingForm(){
              this.eventHub.$emit('building-form', data)
           
          },
  },
  </code></pre>
  <p>And I'm catching it on component B</p>
  <pre><code> //Component B
  
      methods(){
  
               buildingValidation(){
               this.$refs.FullForm.validate().then(success =&gt; {
                   if (!success) {
                       return this.step.id == this.currentstep;
                   }
  
               });
              
  
          },
               }
      
      created(){
  
              this.eventHub.$on('building-form', data =&gt; {  
  
              //Here I'm calling the function buildingValidation()
  
              console.log(data);     
              
              
              })
                  
      
          },
  </code></pre>
  <p>What Am I missing? Thanks</p>