Vue如何解决{{ }} 赋值不能实时刷新的问题

{{ this.locationList[index] }}和{{ this.densityList[index] }} 不能实时更新，需要手动F5刷新才可以更新到页面

 <span>
            检测区域:
            <span
                  style="color: yellow;font-size: 24px;font-weight: bold;margin-right: 10px;">{{
                this.locationList[index]
              }}&nbsp;&nbsp;</span>拥挤度:<span
            style="color: yellow;font-size: 24px;font-weight: bold;">{{ this.densityList[index] }}</span>
          </span>

data() {
    return {
      config: {
      locationList: [],
      densityList: [],
      }
    }
  },

 watch: {
   
    psgList(value) {
      for (const a of value) {

        this.locationList.push(a.location)
        this.densityList.push(a.density)

        console.log(" --------------")
        console.log(this.locationList) //这里浏览器打印截图如下图，修改数据库现有的两条数据会正确传过来但旧的数据不会消失，新数据会一直push在后面，数组越来越大
      }

这里面代码粗略看有两个问题（也有可能是题主代码没给全，这边仅供参考下）

无需在插值语法中，写 this，直接通过 {{locationList[index]}} 读取即可
题主是否定义了 index 这个变量？我看data中并未声明 index，也就是有可能导致读出来的值是 undefined


psgList(value) {
    let arr =[];
    let arr1=[];
      for (const a of value) {
 
         arr=this.locationList.push(a.location)
         arr1=this.densityList.push(a.density)
 
        console.log(" --------------")
        this.locationList=arr;
        this,densityList=arr1
        console.log(this.locationList)
         //这里浏览器打印截图如下图，修改数据库现有的两条数据会正确传过来但旧的数据不会消失，新数据会一直push在后面，数组越来越大
      }
   }

这样试试

vue视图不更新情况 - 简书我们可能经常会在处理vue项目的时候，遇到数据变化，但是视图并没有实时渲染的情况 vue视图为什么不渲染页面的原因当你把一个普通的 JavaScript 对象传给 Vue ...

https://www.jianshu.com/p/5fe073e36baf

vue 检测不到 this.densityList[index] 变化

Vue的更新是有条件的，也可以调用force

this.locationList[index] 这个不需要加this吧

会不会是加载机制的原因，给监听的值里面增加以下代码试试

this.$nextTick(() => {
                    
})

densityList[index]