Bootstrap vue modal, Errror doesnt show instantly after i submit form, shows only after i submit the form and try to type something in input field

Modal shows errors only after i submit the data and type something in the input field. I want it to show instatnly after i submit the form.How to fix theis
This is my input field,

<b-form-group
          label-cols-sm="2"
          label="Confirm Password"
          label-for="example-hf-email2"
        >
          <b-form-input
            name="password_confirmation"
            class="form-control-alt"
            type="password"
            v-model="form.password_confirmation"
          ></b-form-input>
          <div v-if="errors['password_confirmation']">
            <div v-for="err in errors['password_confirmation']" :key="err">
              <small class="text-danger">{{ err }}</small>
            </div>
          </div>
        </b-form-group>
  

This s the method for update.And getting the errors in this.error key

methods: {
        updatePassword() {
          this.submitted = true;
          this.errors = {};
          var self = this;
          axios
            .put("/users/" + this.value, this.form)
            .then(function (response) {
              swal({
                title: "Success",
                text: "Password updated successfully!",
                icon: "success",
              }).then(function () {
                self.$emit("close-modal");
                self.$router.go();
              });
            })
            .catch((err) => {
              if (err.response.status == 422) {
                this.has_error = true;
                Object.assign(this.errors, {}, err.response.data.errors);
              }
            });
        },
      },
    }