Vuelidate using Vue 2.6 and Composition API - vue.js

Question

I'm using the Composition API together with Vue 2 (by using #vue/composition-api) combined with the following two libraries (#vuelidate/core": "^2.0.0-alpha.18,
#vuelidate/validators": "^2.0.0-alpha.15).
I am trying to use sameAs to check whether the entered email and repeated email are a match and return an error if not. Although this is not working as smooth as expected.
This is my validation.js file
import { required, email, maxLength, sameAs } from "#vuelidate/validators";
export default {
email: {
required,
email,
maxLength: maxLength(100),
},
repeatEmail: {
required,
email,
maxLength: maxLength(100),
sameAsEmail: sameAs('email')
},
}
and this is my validation-errors.js file. (probably irrelevant for this question though)
export default {
email: [
{
key: "required",
message: "Email is required.",
id: "emailRequired",
},
{
key: "email",
message: "Wrong format on your email.",
id: "emailFormat",
},
{
key: "maxLength",
message: "Email can't be longer than 100 characters.",
id: "emailLength",
},
],
repeatEmail: [
{
key: "required",
message: "Email is required.",
id: "emailRequired",
},
{
key: "email",
message: "Wrong format on your email.",
id: "emailFormat",
},
{
key: "maxLength",
message: "Email can't be longer than 100 characters.",
id: "emailLength",
},
{
key: "sameAsEmail",
message: "Email isn't matching.",
id: "sameAsEmailFormat",
},
],
}
And this is how I try to use it in my component.
import validations from "#/validation";
import validationErrors from "#/validation-errors";
import { useVuelidate } from "#vuelidate/core";
import { reactive, toRefs } from '#vue/composition-api';
export default {
setup() {
const state = reactive({
email: "",
repeatEmail: "",
});
const $v = useVuelidate(validations, state);
return {
...toRefs(state)
}
}
}
So when I enter the same input in both the inputfield for email and repeatEmail correctly it gives me true as an invalid value.

Answer 1

Built-in validators such as sameAs don't have access to the state, so they aren't supposed to be workable when used like sameAs('email').
This way validators are supposed to be defined in setup function in order to access the state:
const emailRef = computed(() => state.email);
const validations = {
...
repeatEmail: {
...
sameAsEmail: sameAs(emailRef)
},
Otherwise this needs to be done with custom validators instead of built-ins that will access the state on component instance with getCurrentInstance.

Answer 2

if you can use the same validation in vuejs 3 with composition syntax because using compute function get update state
code password = computed(() => state.password);
const validations = {
...
confirm-password: {
...
sameAs: sameAs(emailRef)
},