title: Vue Cannot read property '$refs' of undefined
body: <p>I have a <a href="https://vuejs.org/" rel="nofollow noreferrer">Vue</a> application that leverages <a href="https://vuetifyjs.com/en/" rel="nofollow noreferrer">Vuetify</a>. In this application I have a component called <code>city-selector.vue</code> which is setup like this:</p>
  <pre><code>&lt;template&gt;
    &lt;select-comp
      :id=&quot;id&quot;
      :items=&quot;cityList&quot;
      :item-text=&quot;name&quot;
      :item-value=&quot;cityCode&quot;
      @input=&quot;onInput&quot;&gt;
    &lt;/select-comp&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import VSelect from '../vuetify/VSelect';
      
      export default {
          name: 'city-select-comp',
          extends: VSelect,
          props: {
            id: {
              type: String,
              default: '',
            },
            cityList: {
              type: Array,
                default: () =&gt; { return [] }
              },
          },
          methods: {
            onInput() {
              //Nothing special, just $emit'ing the event to the parent
            },
          },
      }
  &lt;/script&gt;
  </code></pre>
  <p>Everything with this component works fine except that when I open my dev tools I get a bunch of console errors all saying this (or something similar to this):</p>
  <blockquote>
  <p>Cannot read property '$refs' of undefined</p>
  </blockquote>
  <p>How can I fix this sea of red?</p>