working vue components for 1D automata

src/components/MenuCellProperties.vue

@@ -4,31 +4,28 @@
       <div class="form-field">
         <label for="live">Living cell color</label>
         <input
-          id="live"
-          name="live"
+          name="liveColor"
           type="color"
-          :value="liveColor"
-          @click="updateCellProperties"
+          @value="cellProperties.liveColor"
+          @input="updateCellProperties"
         >
       </div>
       <div class="form-field">
         <label for="dead">Dead cell color</label>
         <input
-          id="dead"
-          name="dead"
+          name="deadColor"
           type="color"
-          :value="deadColor"
-          @click="updateCellProperties"
+          :value="cellProperties.deadColor"
+          @input="updateCellProperties"
         >
       </div>
       <div class="form-field">
         <label>Cell size</label>
         <input
-          id="cellSize"
-          name="cellSize"
+          name="size"
           type="number"
-          :value="size"
-          @click="updateCellProperties"
+          :value="cellProperties.size"
+          @input="updateCellProperties"
         >
       </div>
     </form>
@@ -44,15 +41,19 @@ export default {
   },
   data() {
     return {
-      size : this.$store.state.cellProperties['size'],
-      liveColor : this.$store.state.cellProperties['liveColor'],
-      deadColor : this.$store.state.cellProperties['deadColor'],
+      cellProperties: this.$store.state.cellProperties
     }
   },
   methods: {
+    getCellProperties(event) {
+      const elem = event.target
+      const prop = this.$store.state.cellProperties
+      return prop[elem.name]
+    },
     updateCellProperties(event) {
       const elem = event.target
       const prop = {'name' : elem.name, 'value' : elem.value}
+      //console.log(prop)
       this.$store.commit('setCellProperties', prop)
     }
   },