VeeValidate fastExit with multple error not working - vue.js

Question

I am using Veevalidate version 2. The documentation is either broken or not useful. I am trying to use multiple errors on the field but it only displays one. What am I missing? Here is my code:
Vue.use(VeeValidate, {
fastExit: false
});
Validator.extend("number", {
getMessage: (field) =>
"Error 1",
validate: (value) => {
if (/^[^-][0-9]+|[.][0-9]+/) {
return true;
} else {
return false;
}
},
});
Validator.extend("number2", {
getMessage: (field) =>
"The field is required",
validate: (value) => {
if (value == '') {
return false;
} else {
return true;
}
},
});
<input
class="ff"
v-validate="'number|number2|required'"
v-model="application.number"
/>
</div>
<span v-show="errors.has('number')" class="error">
{{
errors.first("number")
}}
</span>
<span v-show="errors.has('number2')" class="error">
{{
errors.first("number2")
}}
</span>

Answer 1

TLDR: codesandbox example
According to the docs you can display multiple errors with errors.collect
<ul>
<li v-for="error in errors.collect('fieldName')">{{ error }}</li>
</ul>
In your example - the validation for number1 is incorrect, you'd need something like if (value.match(<regex>))
main.js
import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
import App from "./App.vue";
Vue.use(VeeValidate, {
fastExit: false
});
Validator.extend("shouldBeNumber", {
getMessage: field => "Should be a number",
validate: value => {
if (value.match(/^[a-z]+/)) {
return false;
} else if (value.match(/^[0-9]+/)) {
return true;
}
}
});
Validator.extend("shouldBeLongerThan3", {
getMessage: field => "Field should be longer than 3 numbers",
validate: value => {
if (value.length < 3) {
return false;
} else {
return true;
}
}
});
Validator.extend("shouldNotIncludeSymbols", {
getMessage: field => "Should not include symbols",
validate: value => {
if (value.match(/[^\w\s]+/)) {
return false;
} else {
return true;
}
}
});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<input
class="ff"
v-validate="'shouldBeNumber|shouldBeLongerThan3|shouldNotIncludeSymbols|required'"
name="number"
v-model="number"
>
<span v-bind:key="index" v-for="(error, index) in errors.collect('number')">{{ error }}</span>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
number: null
};
}
};
</script>
<style lang="scss" scoped>
.fieldset {
margin-bottom: 10px;
border: 0;
}
</style>