Is there a better way other than this.$forceUpdate() to update elements?

I am using vueJS to handle a function which reloads my element.

We have our HTML elements here, a dropdown list to display the option

<el-select v-model="row.display_name_uuid">
  <el-option v-for="(item, i) in displayNameList" 
           :key="i" :value="item.uuid" 
           :label="item.display_name">
   </el-option>
</el-select>

Then we have our method here list is our array data and DisplayNameList contains the dropdown list’s select options

getExclusiceUuid (data, val) {
              this.refreshDisplayNameList() // refresh the newly added data

                this.list.forEach((item, index) => { //loop until key paired 
                    if (item.key == data.key) {
                        let obj = JSON.parse(JSON.stringify(item))

                        this.list.splice(index, 1)//we try to remove it first         

                        this.displayNameList = [...this.displayNameList]
            
                        this.list = [...this.list]
                        
                        this.$forceUpdate()

                        obj.display_name_uuid = val

                        this.list.splice(index, 0, obj) //then we add it back here to try to force update

                        this.$forceUpdate()
                    }
                })
            },

After we update the Display Name List content we would also like to update the contain within the select box, but it doesn’t seem like it updates normally even we confirm the function runs after his.refreshDisplayNameList(), the select element doesn’t seem to refresh even we use this.list.splice(index, 1) remove it and recreate.

and