VueJS v-if = array[index] is not working : <p>I wanted to make a component which gets text-box when mouse is over the image.</p>

<p>Below is HTML template.</p>

<pre><code>&lt;section class="item-container" v-for="(item, index) in items"&gt;
  &lt;div class="image-box" @mouseenter="changeStatus(index)"&gt;
    &lt;img class="image" src="item.link" alt&gt;
  &lt;/div&gt;
  &lt;div class="text-box" @mouseleave="changeStatus(index)" v-if="show[index]"&gt;
    &lt;h4&gt;{{ item.name }}&lt;/h4&gt;
    &lt;p&gt;{{ item.content }}&lt;/p&gt;
  &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>And below is app.js</p>

<pre><code>new Vue({
  el: '#app',
  data: {
    show: [false, false, false],
    items: [
      {
        name: 'Author 1',
        content: 'Content 1'
      },
      {
        name: 'Author 2',
        content: 'Content 2'
      },
      {
        name: 'Author 3',
        content: 'Content 3'
      }
    ]
  },
  methods: {
    changeStatus: function(index) {
      this.show[index] = !this.show[index];
      console.log(this.show); 
      console.log(this.show[index]);  // console gets it as expected
    }
  }
});
</code></pre>

<p>When I execute above codes, I can find that the show property has changed. However, v-if is not updated. Can't we use array[index] for v-if or is there other reason for it?</p>
