Converted Spaces to Tabs for cleaner indentation

src/layouts/address-lookup/address-lookup.vue

@@ -4,13 +4,14 @@
 		<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
 		<funnelSubHeader ref="funnelSubHeader" />
 		<form autocomplete="off">
-          <customerQuestions ref="customerQuestions" />
+			<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 			<funnelFooter ref="funnelFooter" /> 
 		</form>
 	</div>
 </template>
 
 <script>
+
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
@@ -70,9 +71,19 @@ export default {
 			);
 		});
 	},
-  data(){
+	data() {
 		return {
-
+			customerQuestions: {
+				addressQuestions: {
+					streetAddress: "",
+					city: "",
+					state: "",
+					zip: "",
+				},
+				firstName: "",
+				lastName: "",
+				emailAddress: "",
+			}   
 		}
 	},
 	methods: {

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -1,22 +1,22 @@
 <template>
 	<div class="row my-4">
 		<div class="col">
-            <textboxQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill />
+			<textboxQuestion v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill />
 		</div>
 	</div>
 	<transition name="fade" mode="out-in">
 		<div class="address-fields" v-show="showAddressFields" aria-live="polite">
 			<div class="row my-4">
 				<div class="col">
-                    <textboxQuestion v-model="city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill />
+					<textboxQuestion v-model="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill />
 				</div>
 			</div>
 			<div class="row my-4">
 				<div class="col-6">
-                    <dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill />
+					<dropdownQuestion v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill />
 				</div>            
 				<div class="col-6">
-                    <textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill />
+					<textboxQuestion v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill />
 				</div>      
 			</div> 
 		</div>
@@ -40,19 +40,36 @@ import textboxQuestion from "@/common-components/textbox-question/textbox-questi
 import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
 import alert from "@/ux-components/alert/alert";
 import { applicationConfig } from "@/constants/application-config.js";
+import { computed } from 'vue';
 //import store from "@/store";
 
 export default ({
 	name: "address-questions",
+	emits: ['update:modelValue'], // The component emits an event
+	props: {
+		modelValue: {
+			type: Object,
+			default: () => ({
+				streetAddress: "",
+				city: "",
+				state: "",
+				zip: "",            
+			}),
+		},       
+	},
+	setup(props, { emit }) {
+		const addressModel = computed({  // Use computed to wrap the object
+			get: () => props.modelValue,
+			set: (value) => emit('update:modelValue', value),
+		});
+
+		return { addressModel };
+	},           
 	data() {
 		return {
 			showAddressFields: false,
 			displayVerificationWarning: false,
 			displayNoMatchWarning: false,
-            streetAddress: "",
-            city: "",
-            state: "",
-            zip: "",
 			stateOptions: {
 				'AL': 'Alabama',
 				'AK': 'Alaska',
@@ -111,9 +128,6 @@ export default ({
 			alertHeadlineNoMatchWarning: "",
 			alertCopyNoMatchWarning: "",
 		}
-    },
-    props: {
-
 	},
 	methods: {
 		initializeComponent(cmsContent) {
@@ -129,9 +143,6 @@ export default ({
 			this.alertHeadlineNoMatchWarning = cmsContent[5].HeadlineText;
 			this.alertCopyNoMatchWarning = cmsContent[5].BodyText;
 		}
-    },
-    computed: {
-
 	},
 	mounted() {
 
@@ -175,9 +186,9 @@ export default ({
 							});
 						}
 						else {
-                            self.city = "";
+							self.addressModel.city = "";
-                            self.state = "";
+							self.addressModel.state = "";
-                            self.zip = "";      
+							self.addressModel.zip = "";      
 							self.showAddressFields = true;
 							self.displayVerificationWarning = false;
 							self.displayNoMatchWarning = true;
@@ -193,7 +204,7 @@ export default ({
 					}
 
 					if (place && place.address_components) {
-                        self.streetAddress= "";
+						self.addressModel.streetAddress= "";
 						self.showAddressFields = true;
 
 						for (const component of place.address_components) {
@@ -201,23 +212,23 @@ export default ({
 
 							switch (componentType) {
 								case "street_number": {
-                                    self.streetAddress  = component.long_name;
+									self.addressModel.streetAddress  = component.long_name;
 									break;
 								}
 								case "route": {
-                                    self.streetAddress += ' ' + component.short_name;
+									self.addressModel.streetAddress += ' ' + component.short_name;
 									break;
 								}
 								case "locality": {
-                                    self.city = component.long_name;
+									self.addressModel.city = component.long_name;
 									break;
 								}
 								case "administrative_area_level_1": {
-                                    self.state = component.short_name;
+									self.addressModel.state = component.short_name;
 									break;
 								}
 								case "postal_code": {
-                                    self.zip = component.long_name;
+									self.addressModel.zip = component.long_name;
 									break;
 								}
 

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -1,18 +1,18 @@
 <template>
-    <addressQuestions ref="addressQuestions"/>
+	<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
 	<div class="row my-4">
 		<div class="col">
-        <textboxQuestion v-model="firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill />
+			<textboxQuestion v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill />
 		</div>
 	</div> 
 	<div class="row my-4">
 		<div class="col">
-        <textboxQuestion v-model="lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill />
+			<textboxQuestion v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill />
 		</div>
 	</div>
 	<div class="row my-4">
 		<div class="col">
-        <textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill />
+			<textboxQuestion v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill />
 		</div>
 	</div>  
 </template>
@@ -20,16 +20,42 @@
 <script>
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import { computed } from 'vue';
 //import store from "@/store";
 
 export default ({
 		name: "customer-questions",
-    data(){
+		emits: ['update:modelValue'], // The component emits an event
-        return {
+		props: {
+			modelValue: {
+				type: Object,
+				default: () => ({
+					customerQuestions: {
+						addressQuestions: {
+							streetAddress: "",
+							city: "",
+							state: "",
+							zip: "",
+						},
 						firstName: "",
 						lastName: "",
 						emailAddress: "",
 					}          
+				}),
+			}       
+		},    
+		data(){
+			return {
+
+			}
+		},
+		setup(props, { emit }) {
+			const customerModel = computed({  // Use computed to wrap the object
+					get: () => props.modelValue,
+					set: (value) => emit('update:modelValue', value),
+			});
+
+			return { customerModel };
 		},     
 		methods: {
 			initializeComponent(cmsContent){