I have a little problem with my Vue application.

Here I have a .vue file named Module1.vue, where the user has to enter a email adress.

<template>
<div class="row">
 <div class="column">
  <span>Emailadresse</span>
 </div>
 <div class="column column2">
  <input id="inputMail" type="text" placeholder="Bsp: franken@stein.öö"/>
 </div>
 <span ref="mailSpan1" id="mailSpan"></span>
</div>

</template

Then i created a method which should check the correctness of the email format. And to show in a span if the email is valid or not.

module.exports = {
  name: "Emaildaten Baustein",
  props: {},
  data() {
  },
  methods:{
    checkInput(){
        let email = document.getElementById('inputMail');
        let spanMail = document.getElementById('mailSpan');

        email.onkeydown = function(){
        const regex = /^([\.\_a-zA-Z0-9]+)@([a-zA-Z]+)\.([a-zA-Z]){1,8}$/;
        const regexo = /^([\.\_a-zA-Z0-9]+)@([a-zA-Z]+)\.([a-zA-Z]){1,3}\.[a-zA-Z]{1,3}$/;
        if(regex.test(email.value) || regexo.test(email.value))
        {
          spanMail[0].value="Your email is valid";
          spanMail[0].style.color= 'lime';
        }
        else
        {
          spanMail[0].value="Your email is invalid";
          spanMail[0].style.color= 'red';
        }
      }
    }
  },
  mounted(){
    this.checkInput();
  }
};

Now when I run my application and type in something, I get this error:

Uncaught TypeError: Cannot set property 'value' of undefined
    at HTMLInputElement.email.onkeydown (eval at C (httpVueLoader.js:86), <anonymous>:32:29)

For you information: I use this Module1.vue component in a other component. This looks like this:

<template>
 <header-component></header-component>
 <email-component></email-component> //Module1.vue
 <footer-component></footer-component>
</template>