Bootstrap Vue Input State - vue.js

Question

Hi im trying to make a registration form. So when the user correctly inputs the correct detail it will display green check mark. When there is error in the input it will display an error below the input. However the input will still remain green as shown in the picture. How can I make it turn red?
Registeration form picture
Below is the code:
Code for the registeration form:
<b-form :validated="formValidation" novalidate>
<table align="center" style="width:100%">
<tr>
<td class="half">
<label>First Name:</label>
<b-form-input v-model="input.first_name.value" :state="input.first_name.state" placeholder="Enter First Name" required />
<b-form-invalid-feedback :state="input.first_name.state">{{ input.first_name.errMsg }}</b-form-invalid-feedback>
</td>
<td class="half">
<label>Last Name:</label>
<b-form-input v-model="input.last_name.value" :state="input.last_name.state" placeholder="Enter Last Name" required />
<b-form-invalid-feedback :state="input.last_name.state">{{ input.last_name.errMsg }}</b-form-invalid-feedback>
</td>
</tr>
<tr>
<td class="half">
<label>Email:</label>
<b-form-input v-model="input.email.value" :state="this.input.email.state" placeholder="Enter Email" required />
<b-form-invalid-feedback :state="input.email.state">{{ input.email.errMsg }}</b-form-invalid-feedback>
</td>
<td class="half">
<label>Phone Number:</label>
<b-form-input v-model="input.phone_no.value" :state="input.phone_no.state" placeholder="Enter Phone Number" required />
<b-form-invalid-feedback :state="input.phone_no.state">{{ input.phone_no.errMsg }}</b-form-invalid-feedback>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<b-button variant="primary" align-h="end" #click="onSubmit">Submit</b-button><br/>
<br/>
</td>
</tr>
</table>
</b-form>
Code for the script part:
import { register } from "#/api/auth.js"
export default {
name: "RegisterUser",
data() {
return {
formValidation: null,
input: {
first_name: {
value: '',
errMsg: null,
state: null
},
last_name: {
value: '',
errMsg: null,
state: null
},
email: {
value: '',
errMsg: null,
state: null
},
phone_no: {
value: '',
errMsg: null,
state: null
}
}
},
created() {
if(this.$session.flash.get("flash-message")) {
this.$bvToast.toast(this.$session.flash.get("flash-message"), { autoHideDelay: 5000, variant: this.$session.flash.get("flash-class"), solid: true })
}
},
methods: {
onSubmit() {
// Form Validation
this.formValidation = true
var doSubmit = true
this.input.password.errMsg = null
this.input.confirm_password.errMsg = null
if (this.input.first_name.value == "" || this.input.first_name.value == null) {
doSubmit = false
this.input.first_name.errMsg = "First Name must not be empty"
}
if (this.input.last_name.value == "" || this.input.last_name.value == null) {
doSubmit = false
this.input.last_name.errMsg = "Last Name must not be empty"
}
if (this.input.email.value == "" || this.input.email.value == null) {
doSubmit = false
this.input.email.errMsg = "Email must not be empty"
}
if (this.input.phone_no.value == "" || this.input.phone_no.value == null) {
doSubmit = false
this.input.phone_no.errMsg = "Phone Number must not be empty"
}
let userObj= {
first_name : this.input.first_name.value,
last_name : this.input.last_name.value,
email : this.input.email.value,
phone_no : this.input.phone_no.value,
};
// Submit
if (doSubmit) {
try {
register(userObj)
.then(async (response) => {
if (await response.data.status) {
await this.$bvToast.toast(response.data.message, { autoHideDelay: 5000, variant: "success", solid: true })
await this.$session.flash.set("flash-class", "success")
await this.$session.flash.set("flash-message", "Registration successful")
await this.$session.set("email", userObj.email)
await new Promise(r => setTimeout(r, 2000));
// await this.$router.push({ name: "password.success" })
await this.$router.push({ name: "register.success" })
this.formValidation = false
} else {
await this.$bvToast.toast(response.data.message, { autoHideDelay: 5000, variant: "danger", solid: true })
}
})
.catch((e) => {
// this.$bvToast.toast(res.data.message, { autoHideDelay: 5000, variant: "danger", solid: true })
// console.log("Testing: " + e.response.status)
if(e.response.status && e.response.status == 422) {
// this.$toast.add({severity:'error', summary: 'Error', detail: e.response.data.message, life: 5000})
this.$bvToast.toast(e.response.data.message, { autoHideDelay: 5000, variant: "danger", solid: true })
if(e.response.data.errors) {
let errObj = e.response.data.errors
this.input.email.errMsg = errObj.email ? errObj.email[0] : null
this.input.email.state = false
console.log("Email State: " + this.input.email.state)
this.input.phone_no.errMsg = errObj.phone_no ? errObj.phone_no[0] : null
this.input.phone_no.state = false
return {
input: {
email: {
state: false
},
phone_no: {
state: false
},
}
}
}
} else {
this.$bvToast.toast("Registration failed. Please try again later.", { autoHideDelay: 5000, variant: "danger", solid: true })
}
})
.finally(() => {
this.loadingIndicator = false
})
} catch(e) {
console.error(e)
}
}
}
}
}
Anyone knows what i'm doing wrong?