vueがリアクティブにならない場合

これは結構ハマりやすそう

エラー例

配列の中身を表示するシンプルなプログラム
ボタンをクリックすると配列の２番目が「青 → 緑」に変更する

<template>
  <div>
    <button @click="fun">ボタン</button>
    <div v-for="(data, index) in datas" :key="index">
      {{data}}
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      datas:["赤","青","黄",]
    }
  },

  methods:{
    fun(){
      this.datas[1]="緑"
      console.log(this.datas)
    }
  }
};
</script>

が動かない。

コンソールを見ると配列は

['赤', '緑', '黄']

ちゃんと変わっている。

正しい例

公式ドキュメントを見ると（配列に関してのところ）この書き方では、変更を検知できないらしい。

色々やり方はあると思うが一例として[set]を使ってみる。

<template>
  <div>
    <button @click="fun">ボタン</button>
    <div v-for="(data, index) in datas" :key="index">
      {{data}}
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      datas:["赤","青","黄",]
    }
  },

  methods:{
    fun(){
      this.$set(this.datas, 1, "緑");
      console.log(this.datas)
    }
  }
};
</script>

なんでリアクティブに変更されないかと思った時は、これを疑った方がいいかも