Vee-validate: $validator injection not working with Vuetify

[triffer]

Versions

• vee-validate: 2.0.9
• vue: 2.5.16
• vuetify: 1.0.18

Describe the bug
Injection of validators using inject: ['$validator'] won't work when child component is nested in v-card or v-form tag. The parent provides $validator, but instead of getting the parent validator, a new one will be injected. If you provide the validator using another name everything works fine, so something is broken with $validator in combination with vuetify.
I don't know if this bug belongs to vuetify or vee-validate. I have submitted this issue here, because functionality of vee-validate is broken in this case, maybe I can get some advice what went wrong. Maybe I'm missing something ...

To Reproduce
Steps to reproduce the behavior:

1. Go to Demo Link
2. Click on validate -> nothing happens
3. Remove v-card tag
4. Click on validate -> validation is shown

Expected behavior
Injection of $validator should work in child components

Demo Link
jsfiddle Demo

[logaretm]

It actually works, v-card gets its own validator instance. And that the default behavior. But any children of v-card will inject that validator. So you don't get the one you are expecting so there are two validator instances here, the one on the root and the one on the v-card component.

You could provide inject: false to the plugin config to prevent validator instances from being injected to all components.

https://jsfiddle.net/zoLgpe46/1/

[cwhsu1984]

I get stuck on this one for 1 day. Is there any reason for v-card to have this kind of behavior?

[logaretm]

@cwhsu1984 This is not related to a specific component, its how the Vue rendering works with slots.