title: Vue.js nested ref, method is undefined
body: <p>I have a 3 level deep component setup that looks like this.</p>
  
  <pre><code>- container
    - section-1 // section1Ref
      - form-1 // form1Ref
  </code></pre>
  
  <p>The container component will trigger the <code>submit</code> method in the <code>section-1</code> via <code>this.$refs.section1Ref.submit()</code>.</p>
  
  <p>The <code>submit</code> method in the <strong>section component</strong> will then call the <code>submit</code> method in the <code>form-1</code> component like <code>this.$refs.form1Ref.submit()</code></p>
  
  <p>I am getting this error in <code>this.$refs.form1Ref.submit()</code> invokation. </p>
  
  <blockquote>
    <p>this.$refs.form1Ref.submit is not a function</p>
  </blockquote>
  
  <p>Tho I am 100% sure that it's defined in the <code>methods</code> object of the <code>form-1</code> component.</p>
  
  <p>I noticed that this is happening when the ref is 3 levels deep.</p>