Vuetify v-text-field：如何根据规则自动设置成功状态

Question

当我在v-text-field上手动设置成功道具时，它变为绿色。

反正只是通过规则就能使它自动变绿吗？

<v-form ref="form" v-model="valid" lazy-validation>
  <v-text-field
    v-model="name"
    :rules="nameRules"
    :counter="10"
    label="Name"
    required
  ></v-text-field>
</v-form>

new Vue({
  el: '#app',
  data: () => ({
    valid: true,
    name: '',
    nameRules: [
      v => !!v || 'Name is required',
      v => (v && v.length <= 10) || 'Name must be less than 10 characters'
   ]
})

https://codepen.io/damianhelme/pen/OaepbX