title: VueJS components ref is undefined at all stages
body: <p>I'm learning VueJS using it with a rails app and I'm having issues trying to access a component from a parent component. It's possible I'm doing this wrong but I can't figure out what the problem is.</p>
  <p>I've tried to boil down my problem to a simple html example:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset='utf-8' /&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;app&quot;&gt;
        &lt;outer&gt;
          &lt;div&gt;
            &lt;form&gt;
              &lt;inner ref=&quot;testref&quot;&gt;&lt;input/&gt;&lt;/inner&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/outer&gt;
      &lt;/div&gt;
      &lt;script&gt;
        let inner = Vue.component('inner', {
          template: `
            &lt;div&gt;
              &lt;span hidden=&quot;true&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/span&gt;
              &lt;input v-model=&quot;searchText&quot; /&gt;
            &lt;/div&gt;
          `,
          props: ['placeholder'],
          data: function() {
            return {
              searchText: this.placeholder
            }
          }
        })
        let outer = Vue.component('outer', {
          template: `
            &lt;div&gt;
              &lt;h3 v-on:click=&quot;testos&quot;&gt;Hello: {{ client_id }}&lt;/h3&gt;
              &lt;slot&gt;&lt;/slot&gt;
            &lt;/div&gt;
          `,
          data: function() {
            console.log('data', this.$refs.testref)
            return {
              client_id: ''
            }
          },
          mounted: function() {
            console.log('mounted', this.$refs.testref)
          },
          methods: {
            testos: function() {
              console.log('method', this.$refs.testref)
            }
          }
        })
        new Vue({
          el: '#app',
          components: {
            'inner': inner,
            'outer': outer
          }
        })
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I get the following console logs:</p>
  <pre class="lang-html prettyprint-override"><code>data undefined
  mounted undefined
  method undefined
  </code></pre>
  <p>I've tried to follow the syntax in <a href="https://v2.vuejs.org/v2/api/#ref" rel="nofollow noreferrer">https://v2.vuejs.org/v2/api/#ref</a>, but I've also tried using <code>:ref</code> instead of <code>ref</code> and it doesn't work any better.</p>
  <p>I get that there is &quot;ref registration timing&quot; complication even if I don't fully understand it. However shouldn't the timing be good when clicking on the H3 ? I was hoping it'd be even resolved by <code>mounted</code> like in <a href="https://stackoverflow.com/a/40884455/2730032">https://stackoverflow.com/a/40884455/2730032</a>.</p>
  <p><strong>Bonus question :</strong> My question is really about how ref works. However I do have a more general problem that might benefit with advice not using ref.</p>
  <p>I have an <code>inner</code> component I'm pleased with that wraps an input field for a client_id with a search field that gives some select-like options from an API and sets the input field client_id to the selected option. I want to re-use that <code>inner</code> component in an <code>outer</code> component that would use the client_id (whenever it is changed by <code>inner</code>) to call an API and fill a bunch of other form fields in the <code>outer</code> component (those fields being given with <code>inner</code> to <code>outer</code> through slots). If that makes any sense.</p>
  <p>I figured the best way to do that is put the client_id as a data field of <code>inner</code> and have <code>outer</code> access it through <code>ref</code>. So here I am trying to get <code>ref</code> to work.</p>
  <p><strong>EDIT1:</strong> There was a copy mistake, sorry about that. The test1 tag was from a previous version. But I get the problem regardless.</p>
  <p><strong>EDIT2:</strong> I accepted Roy J second answer because I feel it best answers the question and even though it is not good design it's probably a valid solution for some people. However in my actual implementation I used Roy J first answer  and anyone reading this question probably should too (I also managed to add <code>inner</code> to <code>outer</code>'s template in order to avoid using <code>app</code>).</p>