How do I use Vuelidate with a custom validator?

Question

I’m trying to validate a 6 digit code with vuelidate. If this.validationcode equals false I want to show a validation error. I'm pretty new to vue so I'm not entirely sure where I'm going wrong. How do I get this to work?

The error I get is:

TypeError: Cannot read property '__isVuelidateAsyncVm' of undefined

JS

data() {
    return {
      validationcode: false,
      validationRules: [
        { vcode: { 
            required,
            numeric,
            minLength: minLength(6),
            maxLength: maxLength(6),
            validCode () { return this.validationcode }
          } },
      ],
    };
  },

I also tried it as an arrow function but it doesn't get the value properly from the looks of it.

validCode: () => {
 console.log("the val code is " + this.validationcode)
 return this.validationcode 
}

HTML - v.formData.vcode.validCode - In the current front end view, this rule is triggered every time.

<div class=“form-group”>
        <input
          type=“text”
          class=“form-control”
          :class=“hasError(‘vcode’) ? ‘is-invalid’ : ‘’”
          placeholder=“Enter your 6 digit code”
          v-model=“formData.vcode”
        />
        <div v-if=“hasError(‘vcode’)” class=“invalid-feedback”>
          <div class=“error” v-if=“!$v.formData.vcode.required || !$v.formData.vcode.minLength || !$v.formData.vcode.maxLength”>
            Enter your 6 digit code
          </div>
          <div class=“error” v-if=“!$v.formData.vcode.numeric”>
            Should be a valid value.
          </div>
          <div class=“error” v-if=“!$v.formData.vcode.validCode”>
            Code incorrect, please try again.
          </div>
        </div>
</div>

This is the method that I am assigning true/false to this.validationcode.

verifyNumber() {


      var numbers = /^[0-9]+$/;
      if (code.match(numbers)) {
        // Twilio functions do not accept multipart/form-data
        const data = new URLSearchParams();
        data.append("phone_number", m.mobileNumber);
        data.append("verification_code", code);

        fetch("https://saffron-cheetah-1234.twil.io/check", {
          method: "POST",
          body: data,
        })
          .then((response) => response.json())
          .then((json) => {
            if (json.success) {

              console.log("Successfully verified the token.");
              this.validationcode = true;

            } else {

              this.validationcode = false;
              console.log(this.validationcode);
              console.log("Incorrect token.");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
      }
    },