Once installed, the Vuelidate plugin adds a new $v property to the Vue prototype and checks for a new object property in the Vue object, called validations. When this property is defined and has some rules, the plugins check for the model's rules on each update.
Using this new Vue prototype, we can check inside our code for the errors inside the rules we defined, and execute functions to tell the plugin that the field was touched by the user to flag as a dirty field or reset it. Using those features, we're able to add a new conditional class based on the rules that we defined on the task model.
The task model is required and has a minimum of five characters. If those rules are not met, the plugin will mark the model with an error. We take this error and use it to show the user that the task field has an active error. When the user fulfills the requirements, the display of the error disappears and the event can be emitted.
