Vue2 validation "this.$v.userData.lastName.$error" leads to "Maximum call stack size exceeded"

I have a problem in my project on Vue2 using Vuelidate.I need to implement data validation and in theory "this.$v.userData.lastName.$error" should return true or false, but in result i get an "Maximum call stack size exceeded" error.

<script>
import { validationMixin } from "vuelidate";
import { required } from "@vuelidate/validators";

export default {
  mixins: [validationMixin],
  data() {
    return {
      userData: {
        lastName: "12312",
        name: "",
      },
    };
  },
  validations() {
    return {
      userData: {
        lastName: { required },
        name: { required },
      },
    };
  },

  methods: {
    consoleLog() {
      //This throws an error
      console.log(this.$v.userData.lastName.$error);
    },
  },
};
</script>

<template>
  <div id="app">
    <button @click.prevent="consoleLog">Тест</button>
  </div>
</template>

Please help. This is my first project on Vue. I've been trying to solve the problem all day, but nothing has worked out for me.

There are two versions of Vuelidate, and you've incorrectly mixed them together.

There is the older vuelidate v0.7.7 package, made solely for Vue 2, with validators that come from vuelidate/lib/validators. documentation link

There is also the newer @vuelidate/core package, compatible with both Vue 2 and Vue 3, with validators that come from the separately installed @vuelidate/validators package. documentation link

So your main problem is using older vuelidate 0.7.7 with newer @vuelidate/validators, when you should be using vuelidate/lib/validators. Change your import line to:

import { required } from "vuelidate/lib/validators";

You can uninstall the @vuelidate/validators package since it's not needed. Going forward make sure you always follow the correct documentation for your version of Vuelidate!