Type 'Form' is not assignable to type 'ToRefs<{ code: any; quantity: any; amount: any; expiresAt: any; }>'

With the current setup in a Vue3 Composition API file:

type Form = {
  code: string;
  amount: number | null;
  quantity: number | null;
  checked: boolean;
  expiresAt?: Date;
};

const form: Form = reactive({
  code: "",
  quantity: null,
  amount: null,
  checked: false,
  expiresAt: new Date(),
});

const rules = {
  code: {
    required,
    minLength: minLength(2),
  },
  quantity: {
    required,
  },
  amount: {
    required,
    minValue: minValue(1),
  },
  expiresAt: {
    required: requiredIf(() => !form.checked),
  },
};

const v$ = useVuelidate(rules, form);

I am still getting Type 'Form' is not assignable to type 'ToRefs<{ code: any; quantity: any; amount: any; expiresAt: any; }> on the v$ line. What can I add to the rules object to make vuelidate understand the types?

import ref from 'vue'

    type Form = {
      code: string;
      amount: number | null;
      quantity: number | null;
      checked: boolean;
      expiresAt?: Date;
    };
    
    const form: Form = ref({
      code: "",
      quantity: null,
      amount: null,
      checked: false,
      expiresAt: new Date(),
    });
    
    const rules = {
      code: {
        required,
        minLength: minLength(2),
      },
      quantity: {
        required,
      },
      amount: {
        required,
        minValue: minValue(1),
      },
      expiresAt: {
        required: requiredIf(() => !form.checked),
      },
    };
    
    const v$ = useVuelidate(rules, form);

First post here, could you try with this ? According to your mistake, Ref should be used instead of reactive.

Here's a link explaining the difference between the two:

https://vuejsdevelopers.com/2022/06/01/ref-vs-reactive/