Refactoring v-model to computed values

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -7,7 +7,7 @@
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
-            v-model="modelValue"
+            v-model="selectedValues"
         />
     </div>
 </template>
@@ -39,6 +39,14 @@ export default ({
         }
     },
     computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
         damageOptionsMap(){
             return {
                 Windshield: true,
@@ -56,11 +64,6 @@ export default ({
                 : [];
         },
     },
-    watch: {
-        modelValue(val) {
-        this.$emit("update:modelValue", val);
-        }
-    },
     components: {
         buttonQuestion,
     }

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -8,7 +8,7 @@
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
-                v-model="modelValue"
+                v-model="selectedValues"
             />
         </div>
     </transition>
@@ -43,6 +43,14 @@ export default ({
         }
     },
     computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
         answersToDisplay(){
             return  Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
@@ -53,11 +61,6 @@ export default ({
                 : [];
         },
     },
-    watch: {
-        modelValue(val) {
-        this.$emit("update:modelValue", val);
-        }
-    },
     components: {
         buttonQuestion,
     }

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -74,7 +74,7 @@ export default {
   },
   data(){
     return {
-      damageLocationQuestionData: [],
+      damageLocationQuestionData: ["Car-SideDoor"],
       driverSideOptionsData: [],
     }
   },

src/layouts/vehicle-make/make-question/make-question.vue

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Make"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -45,10 +57,5 @@ export default {
       this.makes = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

src/layouts/vehicle-make/vehicle-make.vue

@@ -33,7 +33,7 @@ export default {
   name: "vehicle-make",
   data() {
     return {
-      selectedMake: [],
+      selectedMake: String,
     };
   },
   computed: {},

src/layouts/vehicle-model/model-question/model-question.vue

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Model"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -45,10 +57,5 @@ export default {
       this.models = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

src/layouts/vehicle-model/vehicle-model.vue

@@ -33,7 +33,7 @@ export default {
   name: "vehicle-model",
   data() {
     return {
-      selectedModel: [],
+      selectedModel: String,
     };
   },
   computed: {},

src/layouts/vehicle-style/style-question/style-question.vue

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Style"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -49,10 +61,5 @@ export default {
       this.styles = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

src/layouts/vehicle-style/vehicle-style.vue

@@ -32,7 +32,7 @@ export default {
   name: "vehicle-style",
   data() {
     return {
-      selectedStyle: [],
+      selectedStyle: String,
     };
   },
   computed: {},

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -92,8 +92,11 @@ export default {
     },
   },
   watch: {
-    checkValue(){
+    checkValue(newValue, oldValue){
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+      const isInitialization = typeof(oldValue) !== 'function';
+      if (isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
+      }
     }
   },
   components: {

src/ux-components/list-card/list-card.vue

@@ -94,8 +94,11 @@ export default {
     },
   },
   watch: {
-    checkValue(){
+    checkValue(newValue, oldValue){
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+      const isInitialization = typeof(oldValue) !== 'function';
+      if (isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
+      }
     }
   },
   setup(props) {