v-for和v-bind的结合作业，使用数组下标作为属性值的问题

<!-- 作业需求：点击列表中的某一项，那么该项的文字变成红色 -->
    <div id="app">
        <ul>
            <li v-for="(movie,index) in movies" v-bind:class="{fontRed: active[index]}" v-on:click="changeRed(index)">{{index}}-{{movie}}</li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                active: [true,false,false,false,false],
                movies:['蝴蝶效应','黑客帝国','冰河世纪','狮子王','美食总动员']
            },
            methods:{
                changeRed(index){
                    console.log(index);
                    this.active[index]=!this.active[index];
                }
            }
        })
    </script>

这里默认网页显示的是，第一条是红色文字，其他的都是黑色的，而且任凭我怎么点击其他选项，还是没有渲染，但是在console里查看自己的app.active数组的值是修改了。

这时候只有app.active.push(true)这样子修改原来active数组的长度才可以重新渲染。

• 另外，在我搜索的过程中，看到许多都是使用v-for时为什么不能用index作为key，以下作为扩展参考。

  https://blog.csdn.net/AiHuanhuan110/article/details/98223011

如果有小伙伴知道怎么回事，就是具体原理，可以评论指出来，非常感谢！