v-if绑定一个data里不存在的值

如果后续的程序中再把这个值插入到data里，
v-if就没用了
我感觉是v-if只对data中事先存在的值动态响应
有什么办法能解决这个问题么？
还是每次都得把data中的schema都写好？

<!--绑定了一个点击事件，在点击时给data动态插入本来不存在的属性-->
<div id="demo" @click="changeTest">
       
       this is a test for v-if 
       <div v-if="testIf">
            hello,vue
       </div>
         
       <span v-for="object in testArray" v-if="object.isTest" >
          {{  object.content }}
       </span>
</div>

new Vue({
    el: '#demo',
    data:{
  
        testArray: [
          { content: 'xxx'  },
          { content: 'yyy'  },
          { content: 'zzzz' }
        ]
    },
    methods: {
        changeTest: function() {
        
          //这句生效了
          this.$set('testIf', true);
          
          //这句没有效果，想使数组的第一个元素出现
          this.testArray.$set(0, {isTest: true});
          
        }
    }
});

我试了下，用$set改data下的直接属性是会让页面动态呈现的，v-if也生效了
然而数组不可，请问数组要怎么使其中没有的元素添加时在v-if上也动态呈现？

---

感谢@林岑影的回答和其他小伙伴的回答，以下是总结的解决方案

其实这就是个如何插入不存在的值让视图发生更新变化的问题
对于data的直接元素，直接用$set方法就行了
对于插入数组item中不存在的属性，就是把数组的那个item取出来，插入原来不存在的那个属性，然后再把那个item放回数组里。
这里有两个方法可以触发视图更新

• splice()

• $set()

this.testArray.$set(index, item);

this.testArray.splice(index, 1, item);

而

this.testArray[index].someAttr = 'xxx';

或是

this.testArray[index].$set('newAttr', 'xxx');

经测试并不会发生视图更新

另外一种方法就是把所有用到的data对象属性（包括数组里的属性）都事先写好占位，这样就不会发生插入不存在的值的情况

---

当然可以..认真去看文档

<div id="app">
  <ul v-if="d">
    <li>1234</li>
  </ul>
  <span v-for="object in testArray" >
  {{  object.content }} - {{ object.isTest }}
  </span>
</div>

new Vue({
  el: '#app',
  data: {
    testArray: [
      { content: 'xxx'  },
      { content: 'yyy'  },
      { content: 'zzzz' }
    ]
  },
  ready: function(){
  var self = this;
    setTimeout(function(){
     self.$set("d", 1);
     var n =  Object.assign({}, this.testArray[0], { isTest: 1, b: 2 })
     self.testArray.$set(0, n)
   }, 3000)
  }
})

---

"如果后续的程序中再把这个值插入到data里，v-if就没用了"，这句话不是真的。

事实上，后续增加的新属性v-if照样能认识，取决于你是否采用了vue官网要求的方式来添加新属性：

---

建议是事先把可能会使用到的data的属性写好

像官方提供的$set方法还是尽可能的少用