Vulidate with typescript throwing type error

I am using vue 3 / typescript with composition api . when i try to define the rules getting this warning in vs code

(property) FamilyHistory.validationRules: {
    illness: {
        required: ValidationRuleWithoutParams<any>;
    };
    relationship: {
        required: ValidationRuleWithoutParams<any>;
    };
    description: {
        ...;
    };
}
Argument of type '{ illness: { required: ValidationRuleWithoutParams<any>; }; relationship: { required: ValidationRuleWithoutParams<any>; }; description: { ...; }; }' is not assignable to parameter of type 'ValidationArgs<{ illness: string; relationship: string; description: string; }> | Ref<ValidationArgs<{ illness: string; relationship: string; description: string; }>>'.
  Type '{ illness: { required: ValidationRuleWithoutParams<any>; }; relationship: { required: ValidationRuleWithoutParams<any>; }; description: { ...; }; }' is not assignable to type 'ValidationArgs<{ illness: string; relationship: string; description: string; }>'.
    Types of property 'illness' are incompatible.
      Type '{ required: ValidationRuleWithoutParams<any>; }' is not assignable to type 'ValidationRule<string>'.
        Type '{ required: ValidationRuleWithoutParams<any>; }' is not assignable to type 'ValidatorFn<string, any, any>'.
          Type '{ required: ValidationRuleWithoutParams<any>; }' provides no match for the signature '(value: string, siblingState: any, vm: any): boolean | ValidatorResponse | Promise<boolean | ValidatorResponse>'.Vetur(2345)

Here is my code

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore, ActionTypes } from "../store";
import Toaster from "../helpers/Toaster";
import { reactive } from "vue";
import FamilyService from "../service/FamilyService";
import Confirmation from "../components/Confirmation.vue";
import { required } from "@vuelidate/validators";
import useVuelidate from "@vuelidate/core";
import { camelCase } from "lodash";
import moment from "moment";
import AutoComplete from "primevue/autocomplete";
import ToggleButton from "primevue/togglebutton";

@Options({
  components: {
    Confirmation,
    AutoComplete,
    ToggleButton,
  },
})
export default class FamilyHistory extends Vue {
  private recordList = [];
  private recordID = 0;
  private submitted = false;
  private pService;
  private illnessList = [];
  private relationshipList = [];
  private toast;
  private componentName = "";
  private vuexStore = useStore();

  private state = reactive({
    illness: "",
    relationship: "",
    description: "",
  });

  private validationRules = {
    illness: {
      required,
    },
    relationship: {
      required,
    },
    description: {
      required,
    },
  };

 private v$ = useVuelidate(this.validationRules, this.state); <--------------------------  Here throwing the warning of above


}

My Package.json

{
    "private": true,
    "name": "medix",
    "version": "4.0.0",
    "description": "The Pharmacy Management Software",
    "keywords": [
        "Pharmacy",
        "pos",
        "software"
    ],
    "author": "Muhammad Ibrahim",
    "license": "ISC",
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "@chenfengyuan/vue-barcode": "^2.0.0",
        "@sideway/address": "^4.1.1",
        "@vuelidate/core": "^2.0.0-alpha.35",
        "@vuelidate/validators": "^2.0.0-alpha.27",
        "axios": "^0.21.1",
        "bootstrap": "^4.6.0",
        "browser-sync": "^2.27.7",
        "browser-sync-webpack-plugin": "^2.3.0",
        "chart.js": "^3.2.2",
        "chokidar": "^3.5.1",
        "core-js": "^3.9.0",
        "joi": "^17.4.0",
        "jquery": "^3.5.1",
        "jsbarcode": "^3.11.5",
        "laravel-mix": "^6.0.29",
        "moment": "^2.29.1",
        "popper.js": "^1.16.1",
        "primeflex": "^2.0.0",
        "primeicons": "^5.0.0",
        "primevue": "^3.12.1",
        "prosemirror-utils": "^0.9.6",
        "quill": "^1.3.7",
        "register-service-worker": "^1.7.1",
        "v-tooltip": "^2.1.2",
        "vue-axios": "^3.2.4",
        "vue-class-component": "^8.0.0-0",
        "vue-fullscreen": "^3.0.11",
        "vue-meta": "^2.4.0",
        "vue-router": "^4.0.4",
        "vue-toastification": "^2.0.0-rc.1",
        "vuelidate": "^0.7.7",
        "vuex": "^4.0.0",
        "webcam-easy": "^1.0.5",
        "webpack": "^5.69.1"
    },
    "devDependencies": {
        "@types/node": "^17.0.21",
        "@vue/compiler-sfc": "^3.0.2",
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.0-beta.11",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.4",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "ts-loader": "^9.2.7",
        "typescript": "^4.6.2",
        "vue": "^3.0.2",
        "vue-loader": "^16.0.0-beta.9"
    }
}

[A-Ghorab]

#1022 i added a pull request that should fix the typescript errors.

for now i just use it this way const v$ = useVuelidate(rules as unknown as any, form); to hide the errors

[aliibrahimroshan]

@vuelidate/core@2.0.0-alpha.37 Solved the issue thanks 😃