title: What type should I use when declaring a template ref that is a single file component when using the Vue Composition API and TypeScript?
body: <p>I have a single file component that I made called <code>BusinessDetails</code>. I'm using this component in another component, and I've attached the <code>ref</code> attribute to it to access its properties and methods. If I don't give the <code>ref</code> a type, I get an error when accessing its methods that says <code>&quot;Object is possibly null&quot;</code>. I tried setting the type as <code>BusinessComponent</code>, <code>typeof BusinessComponent</code>, <code>Vue.extend(BusinessComponent)</code>, and so on, but they all throw different errors. I eventually settled on just setting the type to <code>any</code>, and living with the <code>eslint</code> warnings. While this goes around the problem, is there was an appropriate way to do this?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;q-layout view=&quot;hHh LpR lfr&quot;&gt;
      &lt;q-header&gt;
          &lt;q-toolbar&gt;
              &lt;q-btn flat round @click=&quot;$router.go(-1)&quot; icon=&quot;arrow_back&quot; aria-label=&quot;Back&quot;/&gt;
              &lt;q-toolbar-title&gt;Create Account&lt;/q-toolbar-title&gt;
          &lt;/q-toolbar&gt;
      &lt;/q-header&gt;
  
      &lt;q-page-container&gt;
          &lt;q-page&gt;
              &lt;business-details ref=&quot;businessDetails&quot; /&gt;
          &lt;/q-page&gt;
      &lt;/q-page-container&gt;
  &lt;/q-layout&gt;
  </code></pre>
  <pre><code>export default Vue.extend({
      name: &quot;CreateAccount&quot;,
      components: {
          BusinessDetails
      },
      setup () {
          const businessDetails: Ref&lt;any&gt; = ref(null);
  
          const isCurrentPageValid = (page: number): Promise&lt;boolean&gt; =&gt; {
              switch (page) {
                  case AccountGroup.BUSINESS:
                      return businessDetails.value.isValid();
                  default:
                      return Promise.resolve(true);
              }
          };
  
          return {
              businessDetails,
              isCurrentPageValid
          };
      }
  });
  </code></pre>