I'm sorry, but I didn't find some similar issue on the web

Here is my problem, I tried to make a form to get contacted from an app.

I code with Vue.js 2 and TypeScript.

So here my code : My template :

      <form ref="form" class="form-data" @submit.prevent="sendEmail">
<input
          type="text"
          name="name"
          v-model="name"
          class="name"
          placeholder="your firstname + lastname"
        />
        <input
          type="email"
          name="email"
          v-model="email"
          class="email infos"
          placeholder="your email"
        />
<textarea
          class="message"
          name="message"
          v-model="message"
          placeholder=" your message">
        </textarea>
        <input class="btn" type="submit" @click.prevent value="Contact me" />
      </form>

My Script :

<script lang='ts'>
import {
  Component,
  Vue,
} from 'vue-property-decorator';
import emailjs from 'emailjs-com';

@Component({
  components: {},
})
export default class Contact extends Vue {
  private name = '';

  private email = '';

  private message = '';

  public sendMail() {
    emailjs.sendForm(
      'service_ID',
      'template_ID',
      this.$refs.form,
      'user_ID'
    )
   .then((result) => {
            console.log('SUCCESS!', result.text);
        }, (error) => {
            console.log('FAILED...', error.text);
        });
      this.name = '',
      this.email = '',
      this.message = '',
  }
</script>

I already try to create an object with my input value instead of this.$ref... but I have an error about arguments "expected 3-4 not 5".

Also, I have a parsing error with ESLint: "Expression expected".

I have Type error too:
"Argument of type 'Vue | Element | (Vue | Element)[] | undefined' is not assignable to parameter of type 'string | HTMLFormElement'. Type 'undefined' is not assignable to type 'string | HTMLFormElement'"

I hope someone can help me. Thank you !