Second input keep showing the same input value eventhough the value in the first input is inserted differently everytime

Question

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!")
        }
    },
},

Answer 1

Found the issue. Still want to post it in case someone has the same problem with me in the future.

I changed let x = []; to let x = this.editedItem.EstimatedContractValue.

Now, whatever number value I put on the first input, the second input will only display the value on the condition that I set.

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

methods: {
    updateWorksGrade() {
        this.worksgrade = [];
        let x = this.editedItem.EstimatedContractValue;
        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!")
        }
    },
},

Answer 2

The value of x is always less than 200000, thus every time the function is call, the x val is same