Vuex：状態のプロパティに動的にバインドする

私はいくつかのdivといくつかのコンテンツを含むカスタムのチェックボックスコンポーネントを作ることに興味があります。Vuex：状態のプロパティに動的にバインドする

私はこのようになります店舗を持っている：

var store = Vuex.Store({ 
    state: { 
    lights: true, 
    sound: false 
    } 
});

は、私は、これらの特性（lightsまたはsound）のいずれかを受け入れ、それらを操作できるカスタム・コンポーネントを作成することができます方法はありますか？

私は今、本当に混乱しています。私はthis as an exampleを使用して、店舗の一つの特性に各チェックボックスをバインドしようとしていたアップ

<div id="app"> 
    <div class="container"> 
    <my-switch :name="'lights'"></my-switch> 
    <my-switch :name="'sound'"></my-switch> 
    </div> 
</div>

次：私はデモここに壊れている

Vue.use(Vuex); 

var store = Vuex.Store({ 
    state: { 
    lights: true, 
    sound: false 
    }, 
    mutations: { 
    updateMessage(state, args) { 
     state[args.name] = args.value; 
    } 
    } 
}); 

Vue.component("my-switch", { 
    props: ["name"], 
    template: '<div>{{ name }} <input type="checkbox" v-model="checked"></div>', 
    computed: { 
    checked: { 
     get() { 
     return this.$store.state[this.name]; 
     }, 
     set(value) { 
     this.$store.commit("updateMessage", { name: this.name, value: value }); 
     } 
    } 
    } 
}); 

var v = new Vue({ 
    el: "#app", 
    store: store 
});

： https://codepen.io/EightArmsHQ/pen/dVXeNL?editors=0010

私はテンプレートを作成しています

問題は次のエラーが発生していることです。