vue 改变数组里的布尔值页面上没有改变

Question

demo在这里http://jsfiddle.net/mtcv824d/点击预览

<div id="app">
  <div @click="change(0)">
  {{arr[0]}}
  </div>
</div>
new Vue({
  el: "#app",  data: {
    arr: [true, false, false]
  },
  methods: {
      change: function(index){
      alert(this.arr[index])        this.arr[index] = !this.arr[index]
      alert(this.arr[index])
    }
  }
})

方法中输出发现值改变了，但页面上却没有变化，是什么原因呢？