我已经创建了一个组合工具，其中包含一个处理错误的函数和一个显示错误的模板：

useErrorHandling.js

import { ref } from 'vue';

export default function useErrorHandling() {
  const errors = ref(null);

  function errorFor(field) {
    return errors.value && errors.value[field]
      ? errors.value[field]
      : null;
  }

  return {
    errors,
    errorFor,
  };
}

ValidationErrors.vue

<template>
  <div>
    <span
      v-for="(error, index) in props.errors"
      :key="key(index)"
    >
      {{ error }}
    </span>
  </div>
</template>

<script setup>
const props = defineProps(['errors']);

const key = (index) => {
  return `validation_error_${index}_${Math.random()}`;
}
</script>

我在我的登录表单上测试这个，当我检查登录表单中的错误值正在更新时，在Vue Dev Tools中检查，但它没有被发送到ValidationErrors组件。

登录.vue

<template>
  <div>
    <form action="#" method="POST">
      <div>
        <label for="email">Email address</label>
        <div>
          <input
              v-model="formData.email"
              id="email"
              name="email"
              type="email"
        </div>
        <validation-errors :errors="errorFor('email')"></validation-errors>
      </div>
  <!-- ... -->
</template>

<script setup>
import { reactive } from 'vue';
import axios from 'axios';
import useErrorHandling from '../../Shared/Composable/useErrorHandling.js';
import ValidationErrors from '../../Components/Form/ValidationErrors.vue';

let { errors, errorFor } = useErrorHandling();

const formData = reactive({
  email: "",
  password: ""
});

const login = async () => {
  axios
    .post('/api/auth/login', {
      email: formData.email,
      password: formData.password
    })
    .then((response) => {
      // Login user
    })
    .catch(error => {
      errors = error.response.data.errors;
    })
}
</script>

我的问题是，如何从Login.vue表单调用errorFor函数？