Vue access errors inside computed - vue.js

Question

I'm just starting to learn Vue and am on to validation.
I've found some older examples which use Vee-Validate but it seems to have changed recently. How can I convert this code to use the new version of Vee-Validate?
As far as I can tell, the code below is attempting to send a bespoke error message rather than the default to the screen if there is an error.
Chrome browser is telling me that it cannot read property 'first' of undefined, so I don't think I can access the error using this.errors.
Is it still possible to access the errors inside 'computed'?
<template>
<div>
<ValidationProvider rules="required" v-slot="{ errors }">
<input type="text" v-model="input" name="myfield">
<span>{{ myError }}</span>
</ValidationProvider>
</div>
</template>
<script>
import { ValidationProvider } from 'vee-validate';
export default {
components: {
ValidationProvider
},
computed: {
myError () {
if (this.errors.first('myfield') === 'The myfield field is required.') {
return 'My bespoke message'
}
return this.errors.first('myfield')
}
}
};
</script>

Answer 1

As answered by MartinT, ValidationProvider uses Scoped Slots and therefore you cannot access it directly in the parent component. However, you still have some options to achieve what you want:
Using Methods
You can pass the error array as an argument of a method and return the bespoke error message you want!
<template lang="html">
<validation-provider rules="required" v-slot="{ errors }">
<input type="text" v-model="input" name="myfield">
<span>{{ myError(errors) }}</span>
</validation-provider>
</template>
<script lang="js">
import { ValidationProvider } from 'vee-validate'
export default {
components: { ValidationProvider },
data () {
return {
input: null
}
},
methods: {
myError (errors) {
if (errors[0] === 'The myfield field is required.') {
return 'My bespoke message'
}
return errors[0]
}
}
}
</script>
But this isn't probably the best option.
Customizing Rules' Messages
In Vee-Validate 3.x.x you can easily customize the error message from an existing rule or you can even create a new rule.
import { extend } from 'vee-validate'
// overwriting the 'required' rule error message.
extend('required', {
...required
message: 'My bespoke message'
})
And then you can display the bespoke message.
<template lang="html">
<validation-provider rules="required" v-slot="{ errors }">
<input type="text" v-model="input" name="myfield">
<span>{{ errors[0] }}</span>
</validation-provider>
</template>

Answer 2

Have a look at Scoped slots. In a nutshell, ValidationProvider component is using a slot, which provides you with errors object. You can think of it as an internal object of ValidationProvider. However, the problem is, it can only be used inside of the slot scope (within ValidationProvider). Your usage assumes, that errors obj is part of your component instance (either data, computed, method...), which is not true. More reading can be found here.