How to compare input form password and confirm fields between Vue components

Question

I am trying to run a comparison of a password and password confirm field inside a v-dialog but I am not sure how to do it.

I am passing a user object to the v-dialog like so:

 <confirm-dialog
      :dialog="dialog"
      :dialogTitle="dialogTitle"
      :dialogText="dialogText"
      :passwordsMatch="passwordsMatch"
      :user="user"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
    /> 

The props are declared in the dialog component like so:

  @Prop() user!: object;
  @Prop() passwordsMatch!: boolean;

I have two text inputs inside a v-dialog which have their respective values added to the user object using v-model.

<v-text-field
  v-model="user.password"
  label="New Password"
  value="Input text"
></v-text-field>

<v-text-field
      v-model="user.confirmPassword"
      label="Confirm Password"
      value="Input text"
></v-text-field>

This function is called using to relay back information to the the parent.

<v-btn
  class="blue--text darken-1"
  text="text"
  @click.native="$emit('onConfirm', { user: user })"
>Confirm</v-btn>

My logic was to check if the two field inputs match in the parent and re-trigger the function that opens the dialog, this time passing a boolean value back to the dialog to let the user know the passwords do not match.

   onConfirm(user) {
    console.log('User after confirm ->', user)
    if(user.password !== user.confirmPassword) {
      alert('Passwords do not match')
      this.passwordsMatch = false // want to use this to notify user in dialog that passwords do not match 
      this.openDialog(user)
    }
     ....// do something else
}

In the function above I can see the user object but its values are not accessible until the function has completed. Therefor it seems that the if block is never triggered. I can see both the password and confirmPassword values in user object after the function has run, by which stage it has ignored the mismatch and executed the next code.

I am sure there is an easier way to do this but I am still figuring out Vue and how to control data flow between parent and child components, which I find a bit tricky.

If anyone can offer any advice or guidance on how this can be achieved, preferably in a simpler way, I would be very grateful.