Vue js vee validate password confirmation with custom components - validation

Question

I use vee-validate in my project with custom components with no problems.
But now for a Password Confirmation input field, I'm not able to make it work properly.
I have custom components for the input fields, somethink like <base-input-field>.
If I add a ref="password" attribute in my custom component (<base-input-field ref="password">), it will not reference the <input> inside my custom component, but the <div> wrapper that encapsulates the <input> html component.
Code example:
<!-- Password -->
<div class="row">
<base-text-field
ref="password"
name="password"
type="password"
:error="isVisible && errors.first('password')"
v-validate="{
required: true,
min: 6,
max: 30,
}"
v-model.trim="password"
required
/>
</div>
<!-- Confirm Password -->
<div class="row">
<base-text-field
name="password_conf"
type="password"
:error="isVisible && errors.first('password_conf')"
v-validate="{
required: true,
confirmed: 'password',
}"
:data-vv-as="password"
v-model.trim="password_conf"
required
/>
</div>

Answer 1

I don't know vee-validate but here is an idea from a similar problem I had with custom components not having access to <input> directly:
Get the reference to the input using JS:
this.$refs.password.$el.querySelector("input")
You could save it in a variable and pass it to your component I guess. Again, I don't know vee-validate. Hope it gives you some ideas.

Answer 2

Can u check which events are supported on your custom component(May be #input/#change)?
If any of events are fired on change of your input there is an option data-vv-validate-on in v-validate where you can set on which event you want to check the validation. Read more here
<base-text-field
ref="password"
name="password"
type="password"
:error="isVisible && errors.first('password')"
v-validate="{
required: true,
min: 6,
max: 30,
}"
v-model.trim="password"
data-vv-validate-on="change"
required
/>

Answer 3

Follow the requirements in this page and you should be fine:
emit input event when the value in your component changes
have name and value defined in component via $_veeValidate. Or, use data-vv-name and data-vv-value-path (details here).
Since you didn't provide the code in base-text-field I can't really give you any further example of how it should work for you.