如何在vuetify表单中添加调用API的自定义验证？

<template>
  <v-container>
    <v-form ref="form" v-model="valid">
      <v-text-field
        v-model="email"
        :rules="[requiredRule, emailRule]"
        label="Email"
        required
      ></v-text-field>
      <v-btn @click="submit">Submit</v-btn>
    </v-form>
  </v-container>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const form = ref(null);
    const valid = ref(false);
    const email = ref('');

    const requiredRule = (val) => !!val || 'Email is required';
    const emailRule = async (val) => {
      if (!val) return true; // 如果字段为空，则跳过验证
      try {
        const response = await fetch('/api/validate-email', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ email: val }),
        });
        const data = await response.json();
        return data.valid || 'Email is already taken';
      } catch (error) {
        console.error('API validation failed:', error);
        return 'API validation failed';
      }
    };

    const submit = () => {
      if (form.value.validate()) {
        // 表单验证通过，执行提交逻辑
        console.log('Form submitted');
      }
    };

    return { form, valid, email, requiredRule, emailRule, submit };
  },
};
</script>