Vue中v-show布尔值使用数组绑定无法监听问题

在Vue中，v-show可以用于控制元素的显隐， 今天在手写一个下拉菜单，需要用v-show绑定一个数组，发现不能直接使用数组下标控制false or true，后来使用分成一个对象，使用键值对控制就没问题。

<template>
  <div>
    <ul>
      <li v-for="(item,index) in lists">
        <p>
          <span v-show="switchName[index].cut">{{item}}</span>
          <button @click="toggle(index)">切换显隐</button>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: ["Text1", "Text2", "Text3", "Text4", "Text5"],
      switchName: [
        {
          cut: false
        },
        {
          cut: true
        },
        {
          cut: false
        },
        {
          cut: true
        },
        {
          cut: false
        }
      ]
    };
  },
  methods: {
    toggle(index){
      this.switchName[index].cut = !this.switchName[index].cut;
    }
  }
};
</script>

<style>
</style>

Vue.js v-show不能监听到通过下标控制数组里的Boolean值变化，可以使用对象通过键值对更改Boolean的值。