vue动态绑定class时遇到的问题

写项目的时候遇到一个很奇怪的问题，可能是我对vue的了解很浅，希望有大神能帮我解决一下，问题如下

本来想实现动态绑定class，却发现了很奇怪的问题，代码如下





从代码看，是个很简单的逻辑， 通过button点击变色，使data中的值改变，从而给div绑定新的class，因为在真正的项目中click是一个ajax请求，为了制造异步，我用了一个setTimeout，一秒钟之后再改变值，页面如下



我先把change函数中的

this.b[0] = true

注释掉



然后点击button，一秒钟后第一个div如期变红



而后我将

this.a = true

注释掉，只留着

this.b[0] = true

再次点击button，神奇的事情发生了，一秒钟后什么也没有发生



原本期望的第二个div并没有变红，我就很懵逼了，为什么改变了一个基本类型的值页面会响应渲染，而改变一个数组中的一项，却不行，后来我又将b改为一个对象，修改对象里的属性也可以使页面改变，那这里的数组到底有什么奥秘，求大佬解决！！！