I am not sure what I should do here in this case. When I click on + Rule, I call this fn()

showAddRuleModal() {
    this.showAddRule = true

    this.$refs.form.reset()

    //reset form values
    this.ruleName = ''
    this.url = 'https://www.'
    this.urlType = 'Single'

    this.ruleDetails = []

    let ruleDetail = {
        attribute_id: '',
        operator_id: '',
        value: ''
    }

    this.ruleDetails.push(ruleDetail)
}

As you can see in the image, I successfully created a rule, and tried to add one more.

As you can see the other values seems to reset but my ruleName input detected as an error even if I reset this.$refs.form.reset()

How can I stop this ?

Note

If I add a space to the default value

this.ruleName = ' '

that error is gone, but now, my form ruleName contains a space. Works, but it's not great.