如何在Vuetify.js的快捷栏中显示文本字段验证检查结果？

<template>
  <v-form>
    <!-- 表单内容 -->
  </v-form>
</template>

<template>
  <v-form>
    <v-text-field
      v-model="name"
      :rules="nameRules"
      label="姓名"
      required
    ></v-text-field>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      nameRules: [
        v => !!v || '姓名不能为空',
        v => (v && v.length <= 10) || '姓名不能超过10个字符'
      ]
    }
  }
}
</script>

<template>
  <v-form>
    <v-text-field
      v-model="name"
      :rules="nameRules"
      label="姓名"
      required
    ></v-text-field>
    <v-messages :value="nameErrors">
      <template v-for="(rule, index) in nameRules" v-slot="{ msg }">
        <v-message :key="index" :value="msg">{{ msg }}</v-message>
      </template>
    </v-messages>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      nameRules: [
        v => !!v || '姓名不能为空',
        v => (v && v.length <= 10) || '姓名不能超过10个字符'
      ]
    }
  },
  computed: {
    nameErrors() {
      const errors = []
      this.nameRules.forEach(rule => {
        const error = rule(this.name)
        if (error) {
          errors.push(error)
        }
      })
      return errors
    }
  }
}
</script>