title: Vue 3 Typescript unable to access method from ref
body: <p>Hi everyone I'm new to Vue 3 and Typescript and I'm having hard time trying to solve typescript error on my project below is the typescript error.</p>
  <p>It's not able to find validate method but it's showing when I try to console it.</p>
  <blockquote>
  <p>Property 'validate' does not exist on type 'string'.</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/yu8u2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yu8u2.png" alt="enter image description here" /></a></p>
  <p>I'm using Vue 3 composition api with typescript and Vue Element Plus, below is my component code.</p>
  <p><strong>Component</strong></p>
  <pre><code>    &lt;template&gt;
    &lt;div class=&quot;w-full h-full absolute flex&quot;&gt;
      &lt;el-form
        class=&quot;w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 m-auto&quot;
        :ref=&quot;formRef&quot;
        :model=&quot;form&quot;
        :rules=&quot;rules&quot;
      &gt;
        &lt;h2&gt;Login&lt;/h2&gt;
        &lt;el-form-item label=&quot;Email&quot; prop=&quot;email&quot;&gt;
          &lt;el-input
            type=&quot;email&quot;
            autocomplete=&quot;off&quot;
            v-model=&quot;form.email&quot;
          /&gt;
        &lt;/el-form-item&gt;
        &lt;el-form-item label=&quot;Password&quot; prop=&quot;password&quot;&gt;
          &lt;el-input
            type=&quot;password&quot;
            autocomplete=&quot;off&quot;
            v-model=&quot;form.password&quot;
          /&gt;
        &lt;/el-form-item&gt;
        &lt;el-form-item&gt;
          &lt;el-button
            type=&quot;success&quot;
            class=&quot;w-full&quot;
            @click=&quot;handleLogin&quot;
          &gt;Submit&lt;/el-button&gt;
        &lt;/el-form-item&gt;
      &lt;/el-form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent, onBeforeMount, onMounted, reactive, ref } from &quot;vue&quot;;
  export default defineComponent({
    name: &quot;Login&quot;,
    setup() {
      const form = reactive({
        email: &quot;&quot;,
        password: &quot;&quot;
      });
      const rules = ref({
        email: [{
          required: true,
          message: &quot;Email is required&quot;,
          trigger: &quot;blur&quot;
        }],
        password: [{
          required: true,
          message: &quot;Password is required&quot;,
          trigger: &quot;blur&quot;
        }]
      });
      const formRef = ref(&quot;formRef&quot;);
  
      const handleLogin = () =&gt; {
        console.log(formRef)
        // Property 'validate' does not exist on type 'string'.
        formRef.value?.validate((valid: boolean) =&gt; {
          console.log(valid);
        });
      };
  
      onMounted(() =&gt; {
        console.log(&quot;Login mounted&quot;);
      });
  
      onBeforeMount(() =&gt; {
        console.log(&quot;Login onBeforeMount&quot;);
      });
  
      return {
        formRef,
        form,
        rules,
        handleLogin
      };
    }
  });
  &lt;/script&gt;
  </code></pre>