How to properly implement a module or plugin in vue js that implements some "standard" behavior for input fields?

Question

Vue.js

Hello! I'm trying to learn vuejs, for simple things everything is pretty clear.
However, I got to the point where I wanted to automate the validation of input fields on forms.
I wrote a TK that I can easily implement without using vue js, here it is:
---------------------------------- -------------------------
Purpose
Make support for the data-validators attribute on input fields
input[type=text]
input[type=number]
input[type =password]
input[type=email]
Works with standard bootstrap 4.2.1 input fields like

<div class="col-md-6 mb-3">
  <label for="iPassword">Password</label>
  <input type="password" class="form-control is-invalid" id="iPassword" placeholder="Enter password" required>
  <div class="invalid-feedback">
  Password must containts numbers and letters different case: upper and lower.
  </div>
</div>

For this example, the programmer can add
the data-validators="[oB421Validator.password,oB421Validator.required]" attribute to the input[type=password] field.
And add a line like this to the initialization of the js application

window.oB421Validator = new B421Validator(window.Localizator.t);

The module intercepts the submit event of the form that contains the input field and, if the entered value is not valid,
adds the is-invalid class and fills div.invalid-feedback with the localized message.
(The localization function can be passed to the constructor like this: ) The module intercepts the input event of the input field, removes is-invalid when input starts, and clears div.invalid-feedback. If a valid value is entered during the input process, adds the is-valid class to the input field. To use a different layout (or other versions of bootstrap), it is planned to inherit from B421Validator and overload the methods responsible for displaying form fields. -------------------------------------------------- --------- END TOR
oB421Validator = new B421Validator(t);
-------------------------------------------------- ---------
But I don't understand how to implement this using vue js.
If we were talking about a non-universal solution, the layout would look like this:

<div class="col-md-6 mb-3">
  <label for="iPassword">Password</label>
  <input placeholder="$t('Enter password')" v-model="password" v-bind:class="passwordIsInvalid" type="password"  name="iPassword"  required>
  <div class="invalid-feedback">
  {{ passwordError }}
  </div>
</div>

and I would use bound fields to implement the desired behavior.
The problem is that with this approach, for each input field, I will have to create several variables in the vue component
responsible for the form (in this example there are three, passwordError, passwordIsInvalid, password)
and repeat this in each component. It's sad.
I think that in vue js there is a way to implement what is written in the TK, I just don’t see it yet (I read the documentation here ).
Can you suggest which way to look?

Answer 1

As Arthur correctly wrote in the comment, vuejs has the ability to create custom directives. This made it possible to implement the TOR with a margin of flexibility for various kinds of changes. Brief documentation and implementation uploaded here . In the near future I will try to test for flexibility by applying it in bootstrap 3 and in bootstrap 4.0.0 beta.