title: TypeError: Cannot read properties of undefined (reading '$refs') with VueJS
body: <p>Parent Component:</p>
  <pre><code>...
  &lt;v-stepper-step
  :rules=&quot;[()=&gt;isValid(1)]&quot;
  &gt;
      MyStep
  &lt;/v-stepper-step&gt;
  &lt;v-stepper-content&gt;
      &lt;Mytag ref=&quot;MyReference&quot; /&gt;
  &lt;/v-stepper-content&gt;
  ...
  methods: {
      isValid(number){
        return mySwitch(number)
   }
      mySwitch(number){
        let v = false
        switch(number){
          case '1':
          v = this.$refs.MyReference.$refs.MyTagForm.validate()
          break
        }
       return v
   }
  }
  </code></pre>
  <p>Child Component:</p>
  <pre><code>...
  &lt;v-form
    ref=&quot;MyTagForm&quot;
  &gt;
  ...
  &lt;/v-form&gt;
  ...
  </code></pre>
  <p>Following problem: as soon as the page is loaded I get the TypeError: Cannot read properties of undefined (reading '$refs'). BUT as soon as the page is loaded and I change between steps everything with the validation is fine.</p>
  <p>I think the problem is that the reference just doesn't exist at the very beginning. I tried to use setInterval and setTimeout around the method in isValid and in mySwitch - but then the validation is always false.</p>
  <p>I hope someone of you can help.</p>