使用 Vue 3 进行 Vuelidate vue 类组件 &打字稿

Question

我正在尝试 vludate 带有Vue 3，但我无法得到它可以使用Vue-Class-Component＆amp;适合我的典型模式。打字稿语法。我看到这个类似的问题一些破裂的变化，导致我现在遇到的相同问题。谁能帮忙翻译这个？

这个示例有效，这是我要学习转换的方法：

    <template>
      <div>
        <input type="email" placeholder="Email..."  v-model="email" @blur="v$.email.$touch" :class="{error: v$.email.$error}" >

        <div v-if="v$.email.$error">
          <p v-if="v$.email.email.$invalid && email !==''"
          >Invalid Email</p>
          <p v-if="v$.email.required.$invalid"
          >Required</p>
        </div>

        <button type="submit" style="background-color:yellow"
        >Submit</button>
      </div>
    </template>

    <script lang="ts">
    import useVuelidate from "@vuelidate/core";
    import {required, email} from "@vuelidate/validators";
    
    export default {
      setup () {
        return { v$: useVuelidate() }
      },
      data(){ return{ email: null, } },
      validations:{ email:{ required, email } }
    }
    </script>

    <style scoped lang="scss"> .error{ color:red; } </style>

我已经尝试了许多不同的安排，但是这是我最近的[破碎]脚本...直接的问题是，在模板中，> v $ .. email未被识别：属性'电子邮件'不存在于type'ref＆lt; lt; lt; lt; validationArgs＆lt; unknown＆gt;，未知＆gt;＆gt;'。我认为我没有正确地使用Vuelidate“注册”电子邮件。

    <script lang="ts">
    import { Vue, Options } from "vue-class-component";
    import useVuelidate from "@vuelidate/core";
    import {required, email} from "@vuelidate/validators";
    //import { Validate } from "vuelidate-property-decorators"; 
     @Options({
       validations:{
         email:{required,email}
       }
     })
    export default class ValidationsAsClass extends Vue {
      v$ = useVuelidate();
      
      //Use of decorator would be best...
      //@Validate({required,email})
      email = "";
     
    }
    </script>

任何帮助将不胜感激。任何有关将标准VUE转换为类分组语法的信息的信息也将不胜感激。