Solve the problem that the Vue array data has changed, and the view is not updated after assignment

Recently, I encountered a problem. The table data has changed, and the view is not updated after the direct assignment. Printing the table data shows that it is the latest data. This is mainly because Vue.js cannot detect the addition or deletion of object properties. Because Vue.js converts properties into getters/setters when initializing an instance, the properties must be on the data object for Vue.js to convert it, for it to be responsive.
As shown in the picture below, at first the backend returned me 10 pieces of data, the first piece of data was Xiaogan rice wine, but it was not displayed on the page.

At first, I directly assigned the array res.result.listpg returned to me by the backend, but it was not displayed, and then I processed it with map. Through the map array method, each piece of data in the array is reprocessed, and the returned new array is reassigned to the current array. This is equivalent to reassigning the array variable, and Vue can monitor and update the view in real time. Then use $settprocesses\; the\; number\; of\; data\; items.Vueprovides\; us\; with$ a set method. The current usage of vue2.0 is: this.$set(this.data,"key",value')

In fact, at the beginning, I mainly considered $Setand$ forceUpdate methods to solve the problem that the data update view does not update, but in the process of solving, it is found that $forceUpdate is not very good for arrays$.$