CSR-762 Refactor to use v-model

src/common-components/base-input-button/base-input-button.vue

@@ -30,11 +30,6 @@ import inputButtonWrapperMixin from "../../mixins/input-button-wrapper-mixin";
 
 export default {
     name: "base-input-button",
-    emits: ["change", "inputButtonClicked"],
-    model: {
-        prop: "modelValue",
-        event: "change",
-    },
     props: {
         // ...inputButtonWrapperMixin.props
         value: {
@@ -132,7 +127,7 @@ export default {
         },
         handleClick(e) {
             this.handleSelectionChange(e);
-            this.$emit("inputButtonClicked", this.valueToEmit);
+            this.$emit("update:modelValue", this.valueToEmit);
         },
         handleFocus() {
             this.$root.handleInputFocus({

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

@@ -45,7 +45,6 @@
                             :groupName="answer.groupName"
                             :isMultiSelect="isMultiSelect"
                             :value="answer.value"
-                            :modelValue="modelValue"
                             :selectingInitiatesLoad="selectingInitiatesLoad"
                             :isWide="isWide"
                             :validationRules="validationRules"
@@ -54,7 +53,8 @@
                             :lastValuePushedToGa="lastValuePushedToGa"
                             :setLastValuePushedToGa="setLastValuePushedToGa"
                             :shouldPushClickEventToGAOnMount="shouldPushClickEventToGAOnMount"
-                            @inputButtonClicked="handleAnswerChange" />
+                            v-model="selectedValues"
+                            />
                         <!-- For nested questions -->
                         <transition name="fade" mode="out-in">
                             <div
@@ -229,11 +229,6 @@ export default {
                         : this.formatString(answer.toString());
             }
         },
-        handleAnswerChange(selectedAnswers) {
-            this.selectedValues = selectedAnswers;
-
-            this.$emit("buttonQuestionChange", selectedAnswers);
-        },
         setLastValuePushedToGa(lastValuePushedToGa) {
             this.lastValuePushedToGa = lastValuePushedToGa;
         },

src/mixins/input-button-wrapper-mixin.js

@@ -22,15 +22,20 @@ export default {
         },
         lastValuePushedToGa: [String, Number],
         setLastValuePushedToGa: Function,
-        shouldPushClickEventToGAOnMount: Boolean
+        shouldPushClickEventToGAOnMount: Boolean,
     },
-    methods: {
+    computed: {
-        handleAnswerChange(e) {
+        selectedValue: {
-            if (this.preHandleAnswerChange) {
+            get() {
-                this.preHandleAnswerChange(e);
+                return this.modelValue;
-            }
+            },
+            set(e) {
+                if (this.preHandleAnswerChange) {
+                    this.preHandleAnswerChange(e);
+                }
 
-            this.$emit("change", e);
+                this.$emit("update:modelValue", e);
+            },
         },
     },
 };

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

@@ -5,7 +5,7 @@
             'list-group list-button-horizontal d-flex flex-column w-100',
             { 'radio-fancy': isCashOrInsurance },
         ]"
-        @inputButtonClicked="handleAnswerChange">
+        v-model="selectedValue">
         <div
             class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
             <span class="m-0" :class="textPosition">

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

@@ -2,7 +2,7 @@
     <baseInputButton
         v-bind="$props"
         buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
-        @inputButtonClicked="handleAnswerChange">
+        v-model="selectedValue">
         <div
             :aria-label="buttonLabel"
             class="list-button-content d-flex flex-column justify-content-center py-3 px-4">

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

@@ -5,7 +5,7 @@
             'list-card w-100 rounded-3 d-flex align-items-center h-100',
             { horizontal: isWide },
         ]"
-        @inputButtonClicked="handleAnswerChange">
+        v-model="selectedValue">
         <div
             class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
             :class="labelClasses">

src/ux-components/radio/radio.vue

@@ -3,7 +3,7 @@
         v-bind="$props"
         buttonWrapperClasses="ui-radio form-check"
         inputClasses="form-check-input"
-        @inputButtonClicked="handleAnswerChange">
+        v-model="selectedValue">
         <div class="d-flex align-items-start form-check-label">
             <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{