每次点击时alert都能看到this.info.status[index]在变化 但是视图没有变化 这是为什么？搞了一下午了也不知道哪里出了问题了 我另一个项目也是这么写的 就没问题 不知道这个为什么这样

vuex的state数据

all: [
    {
      info: {num: [555, 666], status: [false, false]}
    },
    {
      info: {num: [555, 666], status: [false, false]}
    }
  ]

父组件

<div v-for="(item, index) in all" :key=index>
    <div class="info">
      <Info :info="item.info" :key="index"></Info>
    </div>
</div>
computed: {
    ...mapState({
      all: state => state.all
    })
}

子组件

<template>
 <div>
  <div v-for="(item, index) in tags" :key=index>
    <svg class="icon" aria-hidden="true" @click=change(index)>
      <use v-bind:xlink:href="info.status[index] ? item.tag2 : item.tag"></use>
    </svg>
  </div>
 </div>
</template>

<script>
export default {
  name: 'Info',
  props: ['info'],
  data () {
    return {
      tags: [
        {id: 1, tag: '#icon-kan1', tag2: '#icon-kan2'},
        {id: 2, tag: '#icon-xiao2', tag2: '#icon-xiao2'}
      ]
    }
  },
  methods: {
    change (index) {
      alert(this.info.status[index])
      this.info.status[index] = !this.info.status[index]
    }
  }
}
</script>

<style scoped>
</style>