Vue.jsにおける配列の罠

例えば表示切り替えのためのこんな
配列があるとする。

export default {
  components: {
    contactArea
  },
  data() {
    return {
      show: [false, false]
    };
  },
};

これを、こんな感じで変更したとする。

<p v-on:click="show[0] = !show[0]">ここをクリック</p>
<p v-if="show[0]">こいつが出現する</p>

実現したい動作としては、「ここをクリック」を押したら「こいつが出現する」が表示されることだが、この記述だと残念ながら実現できない。

Vueの配列の場合、単純な代入だとリアクティブに反映されないらしい。理由は不明。


[2020/08/28追記]

どうやらJavaScriptの根本的な制限が原因。

オブジェクトでも同じことが起きるが、こちらは新規オブジェクトに代入することでリアクティブに反映できる。

Object.assign({}, this.object);

これを実現したい場合、例えばこうする

<p v-on:click="show.splice(0,1,!show[0])">ここをクリック</p>
<p v-if="show[0]">こいつが出現する</p>

spliceは指定要素、指定箇所への代入だが、これだとうまく動くようだ。
ちなみにpush()しても更新できる。