vue中数据更新页面不刷新

1、vue中数据更新页面不刷新

~~今天小编在写vue页面的时候，遇到了一个问题，就是我修改了data中的数据，页面却没有更新，相信懂vue的大家都知道修改data里面的数据页面是会重新渲染的，但我下面的这种操作却不行：
(1) 出现问题的代码：

<template>
  <div class="test">
      <div class="btn">
          <el-button type="primary" @click="clickHandle">修改</el-button>
      </div>
      <div v-for="(value, key) in tableData" class="show-box">
          <div class="key">{{key}}:</div>
          <div class="value">{{value}}</div>
      </div>
  </div>
</template>

<script>

export default {
data () {
  return {
    tableData: {
      name: '小明',
      age: '18',
      sex: '男'
    }
  }
},
created () {
},
methods: {
  clickHandle () {
    console.log('school:清华大学')
    this.tableData.school = '清华大学'
  }
}
}
</script>

<style lang="scss" scoped>
  .test {
  }
  
  .show-box {
      width: 50%;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
</style>

~~页面展示效果如下图，点击“修改”按钮 “school:‘清华大学’”却没有渲染出来：

（2） 问题解决后的代码：

<template>
    <div class="test">
        <div class="btn">
            <el-button type="primary" @click="clickHandle">修改</el-button>
        </div>
        <div v-for="(value, key) in tableData" class="show-box">
            <div class="key">{{key}}:</div>
            <div class="value">{{value}}</div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: {
        name: '小明',
        age: '18',
        sex: '男',
        school: ''
      }
    }
  },
  created () {
  },
  methods: {
    clickHandle () {
      console.log('school:清华大学')
      this.tableData.school = '清华大学'
    }
  }
}
</script>

<style lang="scss" scoped>
    .test {
    }
    
    .show-box {
        width: 50%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>

~~我将“school”这个属性先写在tableData里面，再修改它。就可以了，效果如下图

2、问题分析

~~可能是vue对引用类型的数据只会监听它被声明时原有的属性变化，而对于新增的属性不会监听（这是我个人根据实践的猜测）。本篇文章只是举例说明，希望大家触类旁通，举一反三，不再被这种类似问题！！！坑！！！。各位大佬如果有不同的见解欢迎评论，我看到后会第一时间回复 (^.^)。