Vee-validate error message doesn't go away - validation

Question

I am trying to build a Vue input component using vee-validate for input error messages. All the errors are working correctly, but when I try to confirm two inputs with each other, the error message pops up but never goes away.
My component:
<template lang="pug">
div
.label {{ label }}
input(:type="type"
:value="value"
#input="$emit('input', $event.target.value)"
#change="$emit('input', $event.target.value)"
:placeholder="placeholder"
v-validate="validation"
:name="name"
:ref="name")
.message
img(v-if="errors.first(name)" src="/static/icons/error-input.svg")
.field(v-if="errors.first(name)") {{ errors.first(name) }}
</template>
<script>
export default {
inject: ['$validator'],
$_veeValidate: {
name () {
return this.name
},
value () {
return this.value
}
},
props: {
label: {
type: String,
required: false
},
placeholder: {
type: String,
required: false
},
validation: {
type: String,
required: false,
default: ''
},
type: {
type: String,
default: 'text',
required: false
},
value: {
type: String
},
name: {
type: String
}
}
}
</script>
How I call it from the parent component when I want to confirm two e-mails:
<template lang="pug">
v-form
text-input(v-model="email"
validation="required|email"
name="email")
text-input(v-model="confirm_email"
validation="required|email|confirmed:email"
name="confirm_email")
</template>
<script>
import { mapActions } from 'vuex'
import textInput from '#/newDesignComponents/inputs/input'
export default {
$_veeValidate: {
validator: 'new' // please set a $validator for this component
},
data () {
return {
email: null,
confirm_email: null
}
},
components: {
textInput
}
}
</script>
Would be great if anybody could help me out!