Use vee-validate flags with Vuetify errors.collect - vuetify.js

Question

I am using Vee Validate with Vuetify like this:
<v-text-field
v-model="email"
type='email'
required
v-validate="'required|email'"
:error-messages="errors.collect('email')"
label="E-mail"
data-vv-name="email"
ref="email"
required
></v-text-field>
I want to use some field flags shown in the docs like this:
<span v-show="errors.has('email') && fields.email.touched">{{ errors.first('email') }}</span>
I want to use the built in Vuetify form errors since they look nice but can not seem to get the flags to work. I have tried:
:error-messages="errors.collect('email') && fields.email.touched"
This clearly is not correct. Any ideas?
Edit
I have added a code pen example, you will notice that as soon as you start typing in the email field you get an error in the confirm email field. What I am trying to do is only show the error if the field has an error and has been touched/changed.
https://codepen.io/tjquinn/pen/gKrVdX?&editors=101

Answer 1

Have you tried to rename your fields bag when adding VeeValidate to Vue in your main.js ? Sometimes conflicts happen whit global name fields.
I do it this way, in my main.js :
Vue.use(VeeValidate, {fieldsBagName: 'formFields'})
and in my code I add the prop data-vv-scope="myFormName" and access it like this :
this.formFields['$myFormName']['keyName'].touched