vue修改数据页面不重新渲染

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染
一、直接添加属性的问题

<template>
  <div>
    <p v-for="(value,key) in item" :key="key">
        {
  { value }}
    </p>
    <button @click="addProperty">动态添加新属性</button>
  </div>
</template>


<script>
export default {
 data:()=>{
        item:{
            oldProperty:"旧值"
        }
    },
    methods:{
        addProperty(){
            this.item.newProperty = "新值"  // 为items添加新属性
            console.log(this.items)  // 输出带有newProperty的items
        }
    }

};
</script>

点击按钮，发现结果不及预期，数据虽然更新了（console打印出了新属性），但页面并没有更新

二、原理分析
下面来分析一下

vue2是用过Object.defineProperty实现数据响应式

const item = {}
Object.defineProperty(obj, 'oldProperty', {
        g