How to use the vuelidate/lib/validators.and function in vuelidate

import {
    and,
    email,
    minLength,
    not,
    or,
    required,
} from 'vuelidate/lib/validators';
import { beforeDate, validDate } from './helper/dateValidator';

export const optionalEmail = {
    or: or(email, not(required)),
};

export const optionalBirthdate = {
    or: or(not(required), and(validDate, beforeDate())),
};

export const patronKindName = {
    required,
    minLength: minLength(3),
};

export const patronKindDescription = {
    required,
    minLength: minLength(3),
};

} from 'vuelidate/lib/validators';
import { DataMixin, PopupMixin } from '~/components/mixins';
import { ReceiptCreateInput, GetBills } from '~/graphql/types';
import { createReceipt } from '~/graphql/documents';
import { optional, currency } from '~/modules/validator';

type PopupMixinType = PopupMixin<{ bill: GetBills.Bills }, ReceiptCreateInput>;

@Component({
    name: 'popup-receipt-add-',
    validations: {
        input: {
            money: currency,
            bankAccountNumber: {
                or: or(
                    and(numeric, minLength(6), maxLength(20)),
                    not(required),
                ),
            },
        },
    },
})
export default class extends mixins(
    PopupMixin,
    DataMixin({ createReceipt, optional }),
) {
    onOpen() {
        this.input = {
            money: 0,
            bankAccountNumber: '',
            bill: {
                id: this.data.bill.id,