Vuetify错误消息颜色未显示

我目前有一个使用vuetify和vuelidate的登录表单。Vuetify用于创建表单并显示错误消息，而Vuelidate用于验证用户输入。我的问题是错误消息没有显示为红色。以下是我的代码和登录表单的屏幕截图

Main.js

import Vue from 'vue'
import App from './App.vue'
import Vuelidate from 'vuelidate'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)
Vue.use(Vuelidate)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Login.vue

<template>
  <!-- v-container is used to center the contents -->
  <v-container>
    <v-form>
      <v-flex xs12 sm10 md8 lg6>
        <v-text-field
          label="Full Name"
          v-model.trim="fullName"
          @input="$v.fullName.$touch()"
          :counter="10"
          :error-messages="fullNameErrors"
        ></v-text-field>
      </v-flex>
      <v-flex xs12 sm10 md8 lg6>
        <v-text-field
          label="Email"
          v-model.trim="email"
          @input="$v.email.$touch()"
          :error-messages="emailErrors"
        ></v-text-field>
      </v-flex>
      <v-flex xs12 sm10 md8 lg6>
        <v-text-field
          label="Password"
          v-model.trim="password"
          @input="$v.password.$touch()"
          :error-messages="passwordErrors"
        ></v-text-field>
      </v-flex>
      <v-btn @click="submit">submit</v-btn>
      <v-btn @click="clear">clear</v-btn>
    </v-form>
  </v-container>
</template>

<script>
import { required, email, maxLength } from "vuelidate/lib/validators";
export default {
  data() {
    return {
      fullName: "",
      email: "",
      password: ""
    };
  },
  validations: {
    email: {
      required,
      email
    },
    password: {
      required
    },
    fullName: {
      required,
      maxLength: maxLength(10)
    }
  },
  computed: {
    fullNameErrors() {
      const errors = [];
      if (!this.$v.fullName.$dirty) return errors;
      !this.$v.fullName.maxLength &&
        errors.push("Name must be at most 10 characters long");
      !this.$v.fullName.required && errors.push("Name is required.");
      return errors;
    },
    emailErrors() {
      const errors = [];
      if (!this.$v.email.$dirty) return errors;
      !this.$v.email.email && errors.push("Must be valid e-mail");
      !this.$v.email.required && errors.push("E-mail is required");
      return errors;
    },
    passwordErrors() {
      const errors = [];
      if (!this.$v.password.$dirty) return errors;
      !this.$v.password.required && errors.push("Password is required");
      return errors;
    }
  },
  methods: {
    submit() {
      this.$v.$touch();
    },
    clear() {
      this.$v.$reset();
      this.fullName = "";
      this.email = "";
      this.password = "";
    }
  }
};
</script>