This is a follow-up question from the question that I've asked before:

Autofill the 2nd input after the 1st input value is filled based on the if/else range condition. Below is the answer is given by @Muge which I follow to solve it.

https://stackoverflow.com/a/70433191/16136444

But I encountered a problem, the second input keep showing the same input value even though the value in the first input is inserted differently every time. It keeps giving me the value of "G1" no matter what number value that I put on the first input.

What could be wrong with my code?

vue template

<v-col cols="12" sm="6" md="6">
    <label style="font-size: 1.5rem;">Estimated Contract Value (RM)</label>
    <v-text-field
        v-model="editedItem.EstimatedContractValue"
        outlined
        @blur="updateWorksGrade"
    ></v-text-field> 
</v-col>
<v-col cols="12" sm="6" md="6">
    <label style="font-size: 1.5rem;">Works Grade</label>
    <v-text-field
        v-model="editedItem.WorksGrade"
        outlined
        readonly
        :items="worksgrade"
    ></v-text-field>
</v-col>

vue script

data: () => ({
    editedItem: {
        EstimatedContractValue: "",
        WorksGrade: "",
    },
    worksgrade: [],
}),

methods: {
    updateWorksGrade() {
        this.worksgrade = [];
        let x = [];
        if ( x < 200000) {
            this.editedItem.WorksGrade = "G1";
        } else if ( x > 200000 && x <= 500000) {
            this.editedItem.WorksGrade = "G2";
        } else if ( x > 500000 && x <= 1000000) {
            this.editedItem.WorksGrade = "G3";
        } else if ( x > 1000000 && x <= 3000000) {
            this.editedItem.WorksGrade = "G4";
        } else {
            alert("oi lebih dah ni!")
        }
    },
},