我想要vue3组合式写的注册组件，表单包括用户名，邮箱，密码，验证码，带校验规则的代码

Vue 3 中使用组合式写注册组件的示例如下：

<template>
  <form @submit.prevent="handleSubmit">
    <label>
      用户名：
      <input v-model="username" :class="{ 'error': errors.username }" />
    </label>
    <div v-if="errors.username" class="error-message">{{ errors.username }}</div>

    <label>
      邮箱：
      <input v-model="email" :class="{ 'error': errors.email }" />
    </label>
    <div v-if="errors.email" class="error-message">{{ errors.email }}</div>

    <label>
      密码：
      <input v-model="password" :class="{ 'error': errors.password }" />
    </label>
    <div v-if="errors.password" class="error-message">{{ errors.password }}</div>

    <label>
      验证码：
      <input v-model="captcha" :class="{ 'error': errors.captcha }" />
    </label>
    <div v-if="errors.captcha" class="error-message">{{ errors.captcha }}</div>

    <button type="submit">注册</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
      captcha: '',
      errors: {
        username: '',
        email: '',
        password: '',
        captcha: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      this.errors = {};
      if (!this.username) {
        this.errors.username = '用户名不能为空';
      }
      if (!this.email) {
        this.errors.email = '邮箱不能为空';
      } else if (!this.validateEmail(this.email)) {
        this.errors.email = '邮箱格式不正确';
      }
      if (!this.password) {
        this.errors.password = '密码不能为空';
      }
      if (!this.captcha) {
        this.errors.captcha = '验证码不能为空';
      }
      if (Object.keys(this.errors).length === 0) {
        // 发送注册请求
      }
    },
    validateEmail(email) {
      // 验证邮箱的正则表达式
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\