vee-validate in steps form - vue.js

Question

I have a problem I'm trying to learn vee-validate
to a form that has steps but the problem is like as far
as the first drop I validate correctly a field from the second step is no longer works properly or someone could help this is all component and methods i think this is scope problem but i don't now?
<template>
<div>
<div v-if="step === 1">
<input
class="form-control loginForm__input"
type="text"
:class="{'input': true, 'is-invalid': errors.has('email') }"
name="email"
v-validate="'required|email'"
placeholder="Email adress"
v-model="registration.email"
/>
</div>
<div v-if="step === 2">
<input
class="form-control loginForm__input"
:class="{'input': true, 'is-invalid': errors.has('nameFirst') }"
v-validate="'required'"
name="nameFirst"
type="text"
placeholder="name"
v-model="registration.nameFirst"
/>
<div class="LoginButton">
<button
type="button"
class="btn button__blue"
#click="nextStep();progressbarNext();"
>Continue</button>
</div>
</div>
</template>
<script>
export default {
name: "Register",
components: {
},
data: function() {
return {
step: 1,
registration: {
email: null,
nameFirst: null,
}
};
},
computed: {},
methods: {
goBack() {
if (this.step === 1) {
this.$router.push("/");
return;
}
this.step--;
},
nextStep() {
this.$validator.validateAll().then(result => {
console.log(result);
if (result) {
if (this.step === 3) {
this.showModal = true;
(this.stepBannerThree = true), (this.step = 3);
return;
}
this.step++;
if (this.step == 2) {
return (this.stepBannerOne = true);
}
if (this.step == 3) {
return (this.stepBannerTwo = true);
}
return;
}
});
},
}
};
</script> ```