vue通过下标修改数组里面内容，同时通过下标修改数组对象里面的内容，然后页面数组更新了？？？

项目里面一直都是知道vue通过下标修改数组里面内容是触发不了页面的更新的，需要用其他方式，当我写其他内容的时候，发现如果在更新其他能触发页面更新的时候，神奇的来了，之前的数组没触发更新的，居然也跟着页面更新了。。。

原来是我孤陋寡闻了，vue的响应式还是没有深入去探讨和了解

<template><div>首页<div>{{ arr }}</div><div>{{ objarr }}</div><div @click="btn">按钮</div><div @click="btn1">按钮</div></div>
</template><script>
export default {name: 'Dashboard',data() {return {arr: [1, 2, 3],objarr: [{num: 0},{num: 0},{num: 0}]}},components: {},created() {},computed: {},methods: {btn() {// this.arr[0] = 100this.objarr[0].num = 100// this.$set(this.arr, 0, this.arr[0])console.log(this.arr)},btn1() {this.arr[0] = 100console.log(this.arr)// this.objarr[0].num = 100// console.log(this.arr)}}
}
</script><style scoped lang="scss"></style>

过程是这样的：
1、先触发btn事件，objarr 在页面的数据更新了；
2、再触发btn1事件，arr 没有更新，因为修改下标不会触发页面更新；

接下来换个顺序：
1、先触发btn1事件，arr 没有更新；
2、再触发btn事件，objarr ，arr 都更新，怀疑是不是vue响应式把data里面的数据更新到页面；