如何在不同名称的vee-validate中显示服务器的错误？

// 引入vee-validate和axios
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';
import axios from 'axios';

// 注册必填规则
extend('required', required);

// 创建Vue实例
new Vue({
  el: '#app',
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      serverErrors: {},
    };
  },
  methods: {
    async submitForm() {
      try {
        // 发送异步请求
        const response = await axios.post('/api/login', this.form);

        // 请求成功，重置错误信息
        this.serverErrors = {};

        // 处理其他逻辑...

      } catch (error) {
        // 请求失败，获取服务器返回的错误信息
        if (error.response && error.response.data && error.response.data.errors) {
          this.serverErrors = error.response.data.errors;
        }
      }
    },
  },
});

<template>
  <ValidationObserver v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit(submitForm)">
      <div>
        <label for="username">Username:</label>
        <ValidationProvider name="username" rules="required" v-slot="{ errors }">
          <input type="text" id="username" v-model="form.username">
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
      </div>
      <div>
        <label for="password">Password:</label>
        <ValidationProvider name="password" rules="required" v-slot="{ errors }">
          <input type="password" id="password" v-model="form.password">
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
      <div>
        <span>{{ serverErrors.username }}</span>
        <span>{{ serverErrors.password }}</span>
      </div>
    </form>
  </ValidationObserver>
</template>