modelValue refactoring start

src/common-components/button-question/button-question.vue

@@ -30,7 +30,7 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
-              v-model="modelValue"
+              v-model="selectedValues"
               data-test="button"
             />
           </div>
@@ -98,6 +98,14 @@ export default {
       }
       return classes;
     },
+    selectedValues: {
+      get: function() {
+        return this.modelValue;
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue", newValue);
+      }
+    },
   },
   data(){
     return {

src/layouts/vehicle-year/vehicle-year.vue

@@ -28,7 +28,7 @@ export default {
   name: "vehicle-year",
   data() {
     return {
-      selectedYear: [],
+      selectedYear: String,
     };
   },
   computed: {},
@@ -73,7 +73,7 @@ export default {
 
   watch: {
     selectedYear(year) {
-
+      
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
       this.$router.navigateAfterSave(
         this.navigationScenarios.SELECTED_YEAR,

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

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Year"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -26,12 +26,24 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
   },
   emits: ['update:modelValue'],
   components: {
     buttonQuestion,
   },
+  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);
+      }
+    }
+  },
   methods: {
     loadInitialData() {
       return baseMixin.methods.dispatchNonBlockingStoreAction(
@@ -44,10 +56,5 @@ export default {
       this.years = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

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

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