Vue.jsで配列・オブジェクトの変更がv-ifなどで検出できない場合の解決方法

Vue.jsで配列・オブジェクトを扱う場合、配列のデータは更新されているのに変更が検出できない、という現象でつまったので書きます。

僕がつまったケース

• mountedで配列に値をセットし、その後あるメソッドを実行した場合に変更が検出できない。

Vue.jsで配列・オブジェクトの変更が検出できない場合の解決方法

ダメな例

export default {
    data(){
        return{
            sports: {} // 配列を初期化
        }
    },
    mounted(){
        this.sports['ball'] = 'baseball'; // キーを指定して値をセット
    },
    methods:{
        changeSports(key, val){
            this.sports[key] = val; // キーを指定して値を変更
        }
    }
}

おなじみの[キー]で指定する方法を使っていますが、これだと、vueテンプレート内で変更が検出できませんでした。

正しい例

export default {
    data(){
        return{
            sports: {} // 配列を初期化
        }
    },
    mounted(){
        this.$set(this.sports, 'ball', 'baseball'); // キーを指定して値をセット
    },
    methods:{
        changeSports(key, val){
            this.$set(this.sports, key, val); // キーを指定して値を変更
        }
    }
}

this.$set(配列, キー, 値)を使うと検出してくれました！