Vuetify - custom rule on v-text-field returns first element as undefined

I used this rule to calculate the minimum purchase quantity and as long as this is not reached the form cannot be sent. The calculation itself works, but the first element is always "undefined". Because the first element is "undefined", the number in the function getSizesQuantity is not correct if the value of the input field is 0. What could be the reason for this?

product.json

{
    "sku": "12345",
    "name": "Product Name",
    "variants": [
        {
            "color": "White",
            "sku": "246420009",
            "colorimage": "path/to/image",
            "sizes": [
                {
                    "size": "XS",
                    "sku": "246420002"
                },
                {
                    "size": "S",
                    "sku": "246420003"
                },
                {
                    "size": "M",
                    "sku": "246420004"
                },
                {
                    "size": "L",
                    "sku": "246420005"
                },
                {
                    "size": "XL",
                    "sku": "246420006"
                },
                {
                    "size": "2XL",
                    "sku": "246420007"
                },
                {
                    "size": "3XL",
                    "sku": "246420008"
                },
                {
                    "size": "4XL",
                    "sku": "246420009"
                }
            ],
            "images": [
                {
                    "look": "front",
                    "packshot": "path/to/image"
                }
            ]
        }
    ]
}

<v-form
    ref="form"
    v-model="isValid"
    lazy-validation
    @submit.prevent="onSubmit">
    <v-form ref="sizeform">
        <div class="grid-row sizes-col">
            <template v-for="(size, index) in variant.selected.sizes">
                <v-text-field
                    ref="sizeInputs"
                    :key="size.sku"
                    v-model.number="variantSize[index]"
                    :rules="sizeRules"
                    :label="size.size"
                    type="number"
                    min="0"
                    @change="(value) => setVariantSize(value, size, index)"
                    required />
            </template>
        </div>
    </v-form>
    <div class="small muted">
    * Mindestabnahme Menge 25 Stück / {{ getSizesQuantity }}
    </div>
</v-form>

data() {
    return {
        variant: this.activeVariant,
        variantSize: [],
        minimumSizesQuantity: 25,
        sizeQuantity: 0,
        sizeRules: [ (v) => {
                let totalQuantity = 0;

                console.log(this.$refs.sizeInputs && this.$refs.sizeInputs.length);

                if (this.$refs.sizeInputs && this.$refs.sizeInputs.length > 0) {
                    this.$refs.sizeInputs.forEach((input) => {
                        if (input.value) {
                            totalQuantity += parseInt(input.value, 10);
                            this.sizeQuantity = totalQuantity;
                        }
                    });
                }

                return totalQuantity >= this.minimumSizesQuantity;
            }
        ],
    };
},
computed: {
    getSizesQuantity() {
        return this.minimumSizesQuantity - this.sizeQuantity;
    },
},

this is the output of console.log(this.$refs.sizeInputs && this.$refs.sizeInputs.length);

undefined
1
2
3
4
5
6
7