Cross field validation not working

[MrToxy]

Trying to use cross-field validation to validate a password and password confirmation field but it's not working, the target/ref to refer doesn't actually return its value.

On the template I have:

<validation-observer ref="observer" v-slot="{invalid}" class="validation-observer" @submit.prevent="validate">
  <form class="standard-form">
    <div class="form-row">
      <div class="form-item">
        <h-text-field v-model="form.password" type="password" name="password" label="Password:" placeholder="Password" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-item">
        <h-text-field v-model="form.password_confirmation" type="password" name="password_confirmation" label="Password Confirmation:" placeholder="Password Confirmation" />
      </div>
    </div>
    <button class="modern-cta-btn">
      Submit
    </button>
  </form>
</validation-observer>

the <h-text-field/> component simply renders a <ValidationProvider> with the rules for the fields and the name provided as prop.

And the rules are:

	password: 'required|password:password_confirmation',
	password_confirmation: 'required',

As per https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields I reference the password_confirmation (the name of the ValidationProvider) as an argument to that validation rule.

The validation rule:

/plugins/vee-validate.js

export default ({app}) => {
	app.validator.extend('password', {
                 params: ['target'],
		validate(value, [target]) {
			console.log('e: ', target);
			return true;
		},
		getMessage: () => 'Password confirmation does not match',
	});
}

The target always logs the name of the param password_confirmation instead of the actual value of that field

An overview of the setup

The last two fields are the password and the password confirmation