title: Typing the DOM ref in the vue.js typescript
body: <p>I'm just wondering why my <code>ref</code> to a simple button won't work in typescript. I created a simple button and a constant and then when component is mounted I check if the ref is <code>null</code> or not. otherwise make the button un-disabled...</p>
  <p>Here is the example code:</p>
  <pre><code>&lt;template&gt;
   &lt;input v-model=&quot;phone&quot; type=&quot;text&quot; /&gt;
   &lt;button ref=&quot;phoneSubmitBtn&quot; type=&quot;button&quot; disabled&gt;تایید&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot; setup&gt;
  import { Ref, ref, watch, onMounted } from 'vue';
  
  const phoneSubmitBtn: Ref&lt;HTMLButtonElement&gt;|Ref&lt;null&gt; = ref(null);
  let phone: Ref&lt;string&gt; | Ref&lt;null&gt; = ref(null);
  
  onMounted(() =&gt; {
      if (phoneSubmitBtn.value === null) { 
          return false
      }
  
      watch(phone, () =&gt; {
          if (phone.value !== null &amp;&amp; phone.value.length === 11) {
              phoneSubmitBtn.value.disabled = false;
          } else{
              phoneSubmitBtn.value.disabled = true;
          }
      })
  })
  &lt;/script&gt;
  </code></pre>
  <p><strong>Note: Logic works fine and everything works as well but the <code>VSCODE</code> tells me that <code>phoneSubmitBtn.value.disabled: Property 'value' does not exist on type 'never'.ts(2339)</code> inside of the watch section.</strong></p>