Vuetify: Child component(NumberField) value set from parent component programmatically is showing required error even with valid value - vuetify.js

Question

Getting required error even when the value is present. This value is set programmatically(as I am using v-model in the parent component). When I change the input value manually error message disappears
From Vue dev tools: Not sure why the modelValue is undefined and if it might be the reason
Child component
< script >
import {
requiredRule
} from "#/composables/validationRules";
import useFieldEntry from "#/composables/fieldEntry";
export default {
name: "NumberField",
props: {
id: {},
rules: {
default: []
},
readOnly: {
default: false
},
modelValue: {
default: ""
},
isRequired: {
default: false
},
decimalPlaces: {
default: null
},
},
setup(props, context) {
const {
isDecimalNumber,
isNumber
} = useFieldEntry();
let isInteger = !props.decimalPlaces ||
props.decimalPlaces == null ||
props.decimalPlaces == 0;
const updateValue = (event) => {
context.emit("update:modelValue", event.target.value);
};
//this is needed if user enters a decimal at end and no digits after
const convertToString = (event) => {
context.emit("update:modelValue", getFormattedValue(event.target.value));
};
function getFormattedValue(value) {
if (!isInteger) {
//0 is a valid value but js considers 0 as false and hence adding the or condition
return parseFloat(value) || parseFloat(value) === 0 ?
parseFloat(value).toFixed(props.decimalPlaces) :
null;
} else {
return parseFloat(value) || parseFloat(value) === 0 ?
parseFloat(value).toFixed(0) :
null;
}
}
let validationRules = [];
if (props.rules && props.rules.length > 0) {
validationRules = validationRules.concat(props.rules);
}
if (props.isRequired) {
validationRules.push(requiredRule);
}
function handler(e) {
return isInteger ? isNumber(e) : isDecimalNumber(e);
}
return {
validationRules,
isDecimalNumber,
convertToString,
isNumber,
handler,
updateValue,
};
},
}; <
/script>
<template>
<v-text-field
:id="id"
label=""
density="compact"
:variant="readOnly ? 'plain' : 'filled'"
:readOnly="readOnly"
:value="modelValue"
#input="updateValue"
hide-details="auto"
:required="isRequired"
#keypress="handler"
#blur="convertToString"
:decimalPlaces="decimalPlaces"
:rules="validationRules"
/>
</template>
validationRules.js:
export const requiredRule = (value) => !!value || "Required";
Parent component:
<script>
export default {
name: "InspectionElements",
setup() {
const modifyElementForm = ref(null);
let selectedElement={
"QUANTITY":"6",
}
function validate() {
return modifyElementForm.value.validate();
}
return {selectedElement, validate}
}
</script>
Parent:
<v-form ref="modifyElementForm">
<NumberField
id="text_qty"
:readOnly="false"
v-model="selectedElement.QUANTITY"
:showSpinner="true"
:isRequired="true"/>
<v-btn
#click="
{validate();
}
"
>
<span>Add</span>
</v-btn></v-form>