How to apply red background or green background for invalid or valid data in vee validate 4

I have a problem. I have this form and I when the form fields is not touched I don't want any errors or colors showing but when I touch one of the fields or change the fields I want a green or red color based on validity or invalidity.

First try: When searching i found that you can write this in css:

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

But the problem is I do not have any controll. And get red fields when I do not touch anything. So one of my other tries is to use dynamic class binding and change color if there is an error or not:

<Form
      class="card col-12 col-md-6 col-xl-4 p-5 mx-auto"
      @submit="submit"
      :validation-schema="schema"
    >
      <h1 class="text-center">Registrera</h1>
      <label>Username</label>
      <Field
        type="text"
        name="username"
        required
        @blur="checkInput($event, 'errorInput1')"
        class="TextInput"
        :class="{
          'error-class': errorFlags.errorInput1 === 'false',
          'success-class': errorFlags.errorInput1 === 'true',
        }"
      />

      <ErrorMessage name="username" />

      <label>Email</label>
      <Field
        input
        type="email"
        name="email"
        required
        @blur="checkInput($event, 'errorInput2')"
        class="TextInput"
        :class="{
          'error-class': errorFlags.errorInput2 === 'false',
          'success-class': errorFlags.errorInput2 === 'true',
        }"
      />
      <ErrorMessage name="email" />

      <label>Password</label>
      <Field type="password" name="password" class="" required />
      <ErrorMessage name="password" />

      <Field
        id="passwordConfirmation"
        name="passwordConfirmation"
        type="password"
        required
        @blur="checkInput($event, 'errorInput3')"
        class="TextInput mt-4"
        :class="{
          'error-class': errorFlags.errorInput3 === 'false',
          'success-class': errorFlags.errorInput3 === 'true',
        }"
      />
      <ErrorMessage name="passwordConfirmation" class="" />

      <button class="btn btn-primary mt-4">Submit</button>
      <router-link class="btn btn-primary mt-3" :to="{ name: 'LoginComponent' }"
        >Login</router-link
      >
    </Form>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";
export default {
  name: "RegisterComponent",
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
    const schema = yup.object({
      email: yup
        .string()
        .required("email is required")
        .email("must be a valid email"),
      username: yup
        .string()
        .required("username is required")
        .min(4)
        .matches(
          /^(?=.*[a-zA-Z]{1,})(?=.*[\d]{0,})[a-zA-Z0-9]{1,15}$/gm,
          "must contain letters and numbers"
        ),

      password: yup
        .string()
        .required("password is required")
        .min(8)
        .matches(
          /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,16}$/gm,
          "must contain 8 characters, one uppercase, one lowercase, one number and one special case character"
        ),
      passwordConfirmation: yup
        .string()
        .required("password confirmation is required")
        .oneOf([yup.ref("password")], "passwords do not match"),

      // passwordConfirmation: yup
      //   .string()
      //   .oneOf([yup.ref("password"), null], "Passwords must match"),
    });
    return {
      schema,
        errorInput1: null, //Changes applied
      errorInput2: null, //Changes applied
      errorInput3: null, //Changes applied
    };
  },
  methods: {
    // v-model bindings
    submit(values) {
      delete values.passwordConfirmation;
      this.register(values).then(() => {
        this.$router.push("/Login");
      });
};

But this try gets me an blank page and this error: Vue warn]: Unhandled error during execution of scheduler Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'errorInput1')