--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Wed Jun 05 18:50:54 2019 +0200
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Fri Jun 07 12:53:41 2019 +0200
@@ -8,11 +8,11 @@
       <div class="d-flex flex-wrap">
         <div
           class="input-group mb-3 mr-2 classbreak"
-          v-for="(value, i) in config.morphology_classbreaks"
+          v-for="(value, i) in morphologyClassbreaks"
           :key="i"
         >
           <input
-            v-model="config.morphology_classbreaks[i]"
+            v-model="morphologyClassbreaks[i]"
             type="number"
             min="0"
             step="0.1"
@@ -22,7 +22,7 @@
             <button
               class="btn btn-sm btn-outline-secondary"
               type="button"
-              @click="config.morphology_classbreaks.splice(i, 1)"
+              @click="morphologyClassbreaks.splice(i, 1)"
             >
               <font-awesome-icon icon="times" />
             </button>
@@ -31,11 +31,9 @@
         <button
           class="btn btn-sm btn-success mb-3"
           @click="
-            config.morphology_classbreaks.push(
-              config.morphology_classbreaks.length
-                ? config.morphology_classbreaks[
-                    config.morphology_classbreaks.length - 1
-                  ]
+            morphologyClassbreaks.push(
+              morphologyClassbreaks.length
+                ? morphologyClassbreaks[morphologyClassbreaks.length - 1]
                 : 1
             )
           "
@@ -51,11 +49,11 @@
       <div class="d-flex flex-wrap">
         <div
           class="input-group mb-3 mr-2 classbreak"
-          v-for="(value, i) in config.morphology_classbreaks_compare"
+          v-for="(value, i) in morphologyClassbreaksCompare"
           :key="i"
         >
           <input
-            v-model="config.morphology_classbreaks_compare[i]"
+            v-model="morphologyClassbreaksCompare[i]"
             type="number"
             step="0.1"
             class="form-control form-control-sm"
@@ -64,7 +62,7 @@
             <button
               class="btn btn-sm btn-outline-secondary"
               type="button"
-              @click="config.morphology_classbreaks_compare.splice(i, 1)"
+              @click="morphologyClassbreaksCompare.splice(i, 1)"
             >
               <font-awesome-icon icon="times" />
             </button>
@@ -73,10 +71,10 @@
         <button
           class="btn btn-sm btn-success mb-3"
           @click="
-            config.morphology_classbreaks_compare.push(
-              config.morphology_classbreaks_compare.length
-                ? config.morphology_classbreaks_compare[
-                    config.morphology_classbreaks_compare.length - 1
+            morphologyClassbreaksCompare.push(
+              morphologyClassbreaksCompare.length
+                ? morphologyClassbreaksCompare[
+                    morphologyClassbreaksCompare.length - 1
                   ]
                 : 1
             )
@@ -122,13 +120,32 @@
 import { mapState } from "vuex";
 
 export default {
+  data() {
+    return {
+      morphologyClassbreaks: [],
+      morphologyClassbreaksCompare: []
+    };
+  },
   computed: {
     ...mapState("application", ["config"])
   },
   methods: {
     submit() {
-      this.$store.commit("application/config", this.config);
+      this.$store.dispatch("application/saveConfig", {
+        morphology_classbreaks: this.morphologyClassbreaks.join(","),
+        morphology_classbreaks_compare: this.morphologyClassbreaksCompare.join(
+          ","
+        )
+      });
     }
+  },
+  mounted() {
+    this.morphologyClassbreaks = this.config.morphology_classbreaks
+      .split(",")
+      .map(n => Number(n));
+    this.morphologyClassbreaksCompare = this.config.morphology_classbreaks_compare
+      .split(",")
+      .map(n => Number(n));
   }
 };
 </script>