I'm using VueJs (coming from React so I'm new), and I have this input which contains a code => combinations of vowels and numbers. I'm having 2 problems, first of all

I'm not sure which be the correct type for the input, and, in second instance my var defined as number | string is throwing error.

I know it might be a kind of stupid problem but I'm new with Vue & TypeScript so it would be really helpful if you can tell me the correct way to do it.

Here's the code:

<template>
  <form>
    <label>Code</label>
    <input 
      type="text"
      placeholder="enter a code using only vowels and numbers"
      required
      maxlength="15"
      minlength="7"
      v-model="codeValue"  <!-- Error here -->
      @blur="handleFocus"
      
       />
    <span v-if="focused">You should only enter vowels and numbers.</span>
  </form>
</template>

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'InputValidations',
  data() {
    return {
      emailValue: '' as string, 
      selectedNumber:0 as number,
      codeValue: '' as string | number, 
      focused: false as boolean
    }
  }
})
</script>

The error comes from v-model="codeValue" and says:

Argument of type 'string | number' is not assignable to parameter of type 'string | null | undefined'.
  Type 'number' is not assignable to type 'string'.VueDX/TS(2345)