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

Question

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.

the flow is we create a new data by createDisplayNameExclusive(), then we calls the refreshDIsplayList() to reload the displayname list, then we trigger this.getExclusiceUuid() to refresh the this.list

createDisplayNameExclusive(data).then(res => {
                if (res.status_code == 200) {
                    this.$message({
                        message: 'Created',
                        type: 'success'
                    })
                    this.dialogFormVisible = false
                    
                    data.key = this.form.key
                    
                    this.$parent. refreshDisplayNameList(data, res.content.data)
                    this.$parent.getExclusiceUuid(data, res.content.data)

                    this.$forceUpdate()
                    
                } else {
                    this.$message({
                        message: res.content.message,
                        type: 'warning'
                    })
                }
            }).catch(e => {
                this.loading = false
            })
        },

    async refreshDisplayNameList(e, updated_data) {

        let displayNameCombine = []
                let data = {
                    ledgerType: 'DisplayName'
                }
                
            let res = await getList(data);
        if (res && res.status_code == 200) {
            this.displayNameList = displayNameCombine;
        }
}


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