dynamic validation isnt work in vuelidate - vue.js

Question

I want returns password and password confirm validation only if the user wants to change the password.
validations() {
if(this.changePassword) {
return {
editedItem : {
account_id : {
required,
minLength : minLength(4),
maxLength : maxLength(15)
},
name: {
required,
minLength: minLength(4),
maxLength: maxLength(20)
},
password: {
required,
minLength: minLength(4),
maxLength: maxLength(20)
},
passwordConfirm: {
required,
sameAsPassword: sameAs('password')
}
}
}
}
else {
return {
editedItem : {
account_id : {
required,
minLength : minLength(4),
maxLength : maxLength(15)
},
name: {
required,
minLength: minLength(4),
maxLength: maxLength(20)
},
}
}
}
},
computed: {
accountIdErrors () {
const errors = []
if (!this.$v.editedItem.account_id.$dirty) return errors
!this.$v.editedItem.account_id.minLength && errors.push('ID should be 4 to 15 characters')
!this.$v.editedItem.account_id.maxLength && errors.push('ID should be 4 to 15 characters')
!this.$v.editedItem.account_id.required && errors.push('ID required')
return errors
},
nameErrors () {
const errors = []
if (!this.$v.editedItem.name.$dirty) return errors
!this.$v.editedItem.name.minLength && errors.push('Name should be 4 to 20 characters')
!this.$v.editedItem.name.maxLength && errors.push('Name should be 4 to 20 characters')
!this.$v.editedItem.name.required && errors.push('Name required')
return errors
},
pwErrors () {
const errors = []
if (!this.$v.editedItem.password.$dirty) return errors
!this.$v.editedItem.password.minLength && errors.push('Password should be 4 to 20 characters')
!this.$v.editedItem.password.maxLength && errors.push('Password should be 4 to 20 characters')
!this.$v.editedItem.password.required && errors.push('Password required')
return errors
},
pwConfirmErrors() {
const errors = []
if (!this.$v.editedItem.passwordConfirm.$dirty) return errors
!this.$v.editedItem.passwordConfirm.sameAsPassword && errors.push('Not same as password')
return errors
},
}
Below is the form. The "changePassword" variable depends on the v-switch.
<v-dialog
v-model="editDialog"
max-width="500px"
>
<v-card>
<v-card-title>
<span class="text-h5"> Edit Account </span>
</v-card-title>
<v-card-text>
<v-container>
<v-form>
<v-row>
<v-text-field
:disabled="!createMode"
v-model="editedItem.account_id"
:error-messages="accountIdErrors"
label="Account ID"
hide-details="auto"
#input="$v.editedItem.account_id.$touch()"
#blur="$v.editedItem.account_id.$touch()"
></v-text-field>
</v-row>
<v-row>
<v-text-field
v-model="editedItem.name"
:error-messages="nameErrors"
label="Name"
hide-details="auto"
#input="$v.editedItem.name.$touch()"
#blur="$v.editedItem.name.$touch()"
></v-text-field>
</v-row>
<v-row>
<v-col>
//if the "changePassword" becomes true, password validation should be enabled
<v-switch
:disabled="createMode"
v-model="changePassword"
label="Change Password"
#click="editPwclear"
></v-switch>
<v-text-field
v-if="changePassword"
v-model="editedItem.password"
:error-messages="pwErrors"
label="New Password"
hide-details="auto"
type = "password"
#input="$v.editedItem.password.$touch()"
#blur="$v.editedItem.password.$touch()"
></v-text-field>
<v-text-field
v-if="changePassword"
v-model="editedItem.passwordConfirm"
:error-messages="pwConfirmErrors"
label="Confirm Password"
hide-details="auto"
type = "password"
#input="$v.editedItem.passwordConfirm.$touch()"
#blur="$v.editedItem.passwordConfirm.$touch()"
></v-text-field>
</v-col>
</v-row>
</v-form>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="blue darken-1"
text
#click="close"
>
Cancle
</v-btn>
<v-btn
color="blue darken-1"
text
#click="editSubmit"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
editPwclear() that runs when the v-switch is clicked. Initializes the value to an empty value.
editPwclear(){
this.editedItem.password = ''
this.editedItem.passwordConfirm = ''
this.$v.$reset()
},
Even if I enter the correct value, a length error always occurs.