diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index d5050f74b..81812b72a 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -1,103 +1,103 @@
 <template>
-  <div class="dropdown-question">
-    <label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
-    <select v-model="selectedOption"
-            class="form-select" 
-            :id="inputId"
-            :name="inputId" 
-            :aria-disabled="isDisabled" 
-            :disabled="isDisabled" 
-            :aria-required="isRequired">
-      <option v-for="(value, name, index) in options" :value="name" :key="index">
-        {{ value }}       
-      </option>
-    </select>
-    <p class="mt-2 form-test-error" v-if="!suppressError">
-      There has been an error!
-    </p>
-  </div>    
+	<div class="dropdown-question">
+		<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
+		<select v-model="selectedOption"
+				class="form-select" 
+				:id="inputId"
+				:name="inputId" 
+				:aria-disabled="isDisabled" 
+				:disabled="isDisabled" 
+				:aria-required="isRequired">
+			<option v-for="(value, name, index) in options" :value="name" :key="index">
+				{{ value }}       
+			</option>
+		</select>
+		<p class="mt-2 form-test-error" v-if="!suppressError">
+			There has been an error!
+		</p>
+	</div>    
 </template>
 
 <script>
 import { useField } from "vee-validate";
 
 export default {
-  name: "dropdown-question",
-  props: {
-    modelValue: String,
-    inputId: String,
-    options: {
-      type: Object,
-      required: true
-    },
-    isDisabled: Boolean,
-    isRequired: Boolean,
-    disableAutoFill: Boolean,
-  },
-  data() {
-      return {
-          labelText: "",
-          ariaLabelText: "",
-      }
-  },
-  methods: {
-      initializeComponent(cmsContent) {
-          var labelText = cmsContent;
-          if (this.disableAutoFill) {
-            var noBreakChar = "&NoBreak;";
-            var position = 1;
-            labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
-          }
+	name: "dropdown-question",
+	props: {
+		modelValue: String,
+		inputId: String,
+		options: {
+			type: Object,
+			required: true
+		},
+		isDisabled: Boolean,
+		isRequired: Boolean,
+		disableAutoFill: Boolean,
+	},
+	data() {
+		return {
+				labelText: "",
+				ariaLabelText: "",
+		}
+	},
+	methods: {
+		initializeComponent(cmsContent) {
+			var labelText = cmsContent;
+			if (this.disableAutoFill) {
+				var noBreakChar = "&NoBreak;";
+				var position = 1;
+				labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
+			}
 
-          this.labelText = labelText;
-          this.ariaLabelText = cmsContent;
-      }
-  },    
-  computed: {
-    selectedOption: {
-      get: function() {
-        return this.modelValue;
-      },
-      set: function(newValue) {
-        this.$emit("update:modelValue", newValue);
-      }
-    },
-  },
+			this.labelText = labelText;
+			this.ariaLabelText = cmsContent;
+		}
+	},    
+	computed: {
+		selectedOption: {
+			get: function() {
+				return this.modelValue;
+			},
+			set: function(newValue) {
+				this.$emit("update:modelValue", newValue);
+			}
+		},
+	},
 };
 </script>
 
 <style lang="scss">
 .dropdown-question {
-  label {
-    color: $black;
-  }
-  .form-label {
-    margin-bottom: .25rem;
-  }
-  .form-select {
-    color: $gray-600;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
-    border: 1px solid $gray-500;
-    border-radius: .5rem;
-    min-height: 3rem;
-    &:focus,
-    &:focus-visible {
-      box-shadow: 0 0 0 2.5px $blue;
-    }
-    &:disabled,
-    &.disabled {
-      background-color: $gray-100;
-      filter: grayscale(100%);
-      &:hover {
-        box-shadow: 0 0 0 4px transparent;
-        border: 1px solid $gray-500;
-      }
-    }
-    &:hover {
-      border: 1px solid $gray-500;
-      box-shadow: 0 0 0 4px $blue-300;
-    }
-  }
+	label {
+		color: $black;
+	}
+	.form-label {
+		margin-bottom: .25rem;
+	}
+	.form-select {
+		color: $gray-600;
+		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
+		border: 1px solid $gray-500;
+		border-radius: .5rem;
+		min-height: 3rem;
+		&:focus,
+		&:focus-visible {
+			box-shadow: 0 0 0 2.5px $blue;
+		}
+		&:disabled,
+		&.disabled {
+			background-color: $gray-100;
+			filter: grayscale(100%);
+			&:hover {
+				box-shadow: 0 0 0 4px transparent;
+				border: 1px solid $gray-500;
+			}
+		}
+		&:hover {
+			border: 1px solid $gray-500;
+			box-shadow: 0 0 0 4px $blue-300;
+		}
+	}
 }
 </style>
 
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 7b71fe185..14c881dce 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -1,129 +1,129 @@
 <template>
-  <div class="textbox-question" :class="hasError ? 'has-error' : ''">
-    <label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
-    <input v-model="value" 
-      v-maska="mask"
-      :type="type" 
-      class="form-control" 
-      :ref="inputId" 
-      :id="inputId" 
-      :name="inputId"
-      :placeholder="placeholderText" 
-      :aria-disabled="isDisabled" 
-      :disabled="isDisabled" 
-      :aria-required="isRequired"     
-      autocomplete="off"   
-      :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" />
-    <p class="mt-2 form-test-error" v-if="!suppressError">
-      There has been an error!
-    </p>
-  </div>
+	<div class="textbox-question" :class="hasError ? 'has-error' : ''">
+		<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
+		<input v-model="value" 
+			v-maska="mask"
+			:type="type" 
+			class="form-control" 
+			:ref="inputId" 
+			:id="inputId" 
+			:name="inputId"
+			:placeholder="placeholderText" 
+			:aria-disabled="isDisabled" 
+			:disabled="isDisabled" 
+			:aria-required="isRequired"     
+			autocomplete="off"   
+			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" />
+		<p class="mt-2 form-test-error" v-if="!suppressError">
+			There has been an error!
+		</p>
+	</div>
 </template>
 
 <script>
 
 export default {
-  name: "textbox-question",
-  props: {
-    type: {
-      type: String,
-      default: 'text',
-    },
-    placeholderText: {
-      type: String,
-      default: '',
-    },
-    modelValue: String,
-    inputId: String,
-    isDisabled: Boolean,
-    isRequired: Boolean,
-    disableAutoFill: Boolean,
-    hasIcon: Boolean,// If input has an icon
-    iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
-    hasError: Boolean,
-    mask: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-      return {
-          labelText: "",
-          ariaLabelText: "",
-      }
-  },
-  methods: {
-      initializeComponent(cmsContent){
-          var labelText = cmsContent;
-          if (this.disableAutoFill) {
-            var noBreakChar = "&NoBreak;";
-            var position = 1;
-            labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
-          }
+	name: "textbox-question",
+	props: {
+		type: {
+			type: String,
+			default: 'text',
+		},
+		placeholderText: {
+			type: String,
+			default: '',
+		},
+		modelValue: String,
+		inputId: String,
+		isDisabled: Boolean,
+		isRequired: Boolean,
+		disableAutoFill: Boolean,
+		hasIcon: Boolean,// If input has an icon
+		iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
+		hasError: Boolean,
+		mask: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			labelText: "",
+			ariaLabelText: "",
+		}
+	},
+	methods: {
+		initializeComponent(cmsContent){
+				var labelText = cmsContent;
+				if (this.disableAutoFill) {
+					var noBreakChar = "&NoBreak;";
+					var position = 1;
+					labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
+				}
 
-          this.labelText = labelText;
-          this.ariaLabelText = cmsContent;
-      }
-  },  
-  computed: {
-      value: {
-          get: function() {
-              return this.modelValue;
-          },
-          set: function(newValue) {
-              this.$emit("update:modelValue", newValue);
-          }
-      },     
-  },
+				this.labelText = labelText;
+				this.ariaLabelText = cmsContent;
+		}
+	},  
+	computed: {
+		value: {
+				get: function() {
+						return this.modelValue;
+				},
+				set: function(newValue) {
+						this.$emit("update:modelValue", newValue);
+				}
+		},     
+	},
 };
 </script>
 
 <style lang="scss">
 .textbox-question {
-  label {
-    color: $black;
-  }
-  input {
-    &.has-icon {
-      background-image: url(~@/assets/img/icons/location-pin.svg);
-      background-repeat: no-repeat;
-      background-position: .75rem 50%;
-      background-size: 1rem auto;
-      padding: 0 0.75rem 0 2.5rem;
-      &.icon-right {
-        background-position: calc(100% - .75rem) 50%;
-        padding: 0 2.5rem 0 0.75rem
-      }
-    }
-  }
-  .form-label {
-    margin-bottom: .25rem;
-  }
-  .form-control {
-    border: 1px solid $gray-500;
-    border-radius: .5rem;
-    min-height: 3rem;
-    &::placeholder {
-      color: $gray-500;
-    }
-    &:focus {
-      box-shadow: 0 0 0 2.5px $blue;
-    }
-    &:disabled,
-    &.disabled {
-      background-color: $gray-100;
-      &:hover {
-        box-shadow: 0 0 0 4px transparent;
-        border: 1px solid $gray-500;
-      }
-    }
-    &:hover {
-      border: 1px solid $gray-500;
-      box-shadow: 0 0 0 4px $blue-300;
-    }
-  }
-  p {
-    display: none;
-  }
+	label {
+		color: $black;
+	}
+	input {
+		&.has-icon {
+			background-image: url(~@/assets/img/icons/location-pin.svg);
+			background-repeat: no-repeat;
+			background-position: .75rem 50%;
+			background-size: 1rem auto;
+			padding: 0 0.75rem 0 2.5rem;
+			&.icon-right {
+				background-position: calc(100% - .75rem) 50%;
+				padding: 0 2.5rem 0 0.75rem
+			}
+		}
+	}
+	.form-label {
+		margin-bottom: .25rem;
+	}
+	.form-control {
+		border: 1px solid $gray-500;
+		border-radius: .5rem;
+		min-height: 3rem;
+		&::placeholder {
+			color: $gray-500;
+		}
+		&:focus {
+			box-shadow: 0 0 0 2.5px $blue;
+		}
+		&:disabled,
+		&.disabled {
+			background-color: $gray-100;
+			&:hover {
+				box-shadow: 0 0 0 4px transparent;
+				border: 1px solid $gray-500;
+			}
+		}
+		&:hover {
+			border: 1px solid $gray-500;
+			box-shadow: 0 0 0 4px $blue-300;
+		}
+	}
+	p {
+		display: none;
+	}
 }
 </style>
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index b3a4fa97f..9914c406c 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -1,16 +1,17 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
-        <funnelHeader ref="funnelHeader" />
-        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
-        <funnelSubHeader ref="funnelSubHeader" />
-        <form autocomplete="off">
-          <customerQuestions ref="customerQuestions" />
-          <funnelFooter ref="funnelFooter" /> 
-        </form>
-    </div>
+	<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+		<funnelHeader ref="funnelHeader" />
+		<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+		<funnelSubHeader ref="funnelSubHeader" />
+		<form autocomplete="off">
+			<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";
@@ -26,70 +27,80 @@ import store from "@/store";
 
 
 export default {
-  name: "address-lookup",
-  async beforeRouteEnter(to, from, next) {
-      // Call APIs
-      const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+	name: "address-lookup",
+	async beforeRouteEnter(to, from, next) {
+		// Call APIs
+		const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
-      // Settle promises and get results
-      const promiseResultMap = [
-          {
-              resultKey: "cmsContent",
-              promise: cmsContentPromise,
-          },
-      ];
+		// Settle promises and get results
+		const promiseResultMap = [
+			{
+				resultKey: "cmsContent",
+				promise: cmsContentPromise,
+			},
+		];
 
-      const resultMap = await settleAllPromises(promiseResultMap);
+		const resultMap = await settleAllPromises(promiseResultMap);
 
-      // Call the "next" function to complete the transition to this page.
-      next((vm) => {
-          vm.$refs.funnelHeader.initializeComponent(
-            resultMap.cmsContent.FunnelHeaderWidget
-          );
-          vm.$refs.vehicleBanner.initializeComponent(
-            resultMap.cmsContent.VehicleBannerWidget
-          );
-          vm.$refs.funnelSubHeader.initializeComponent(
-            resultMap.cmsContent.FunnelSubHeaderWidget
-          );
-          vm.$refs.funnelFooter.initializeComponent(
-            resultMap.cmsContent.FunnelFooterWidget
-          );
-          vm.$refs.customerQuestions.initializeComponent([
-              resultMap.cmsContent.StreetAddressQuestionWidget,
-              resultMap.cmsContent.CityQuestionWidget,
-              resultMap.cmsContent.StateQuestionWidget,
-              resultMap.cmsContent.ZipQuestionWidget,
-              resultMap.cmsContent.AlertVerificationWarningWidget,
-              resultMap.cmsContent.AlertNoMatchWarningWidget,
-              resultMap.cmsContent.FirstNameQuestionWidget,
-              resultMap.cmsContent.LastNameQuestionWidget,
-              resultMap.cmsContent.EmailAddressQuestionWidget,
+		// Call the "next" function to complete the transition to this page.
+		next((vm) => {
+			vm.$refs.funnelHeader.initializeComponent(
+				resultMap.cmsContent.FunnelHeaderWidget
+			);
+			vm.$refs.vehicleBanner.initializeComponent(
+				resultMap.cmsContent.VehicleBannerWidget
+			);
+			vm.$refs.funnelSubHeader.initializeComponent(
+				resultMap.cmsContent.FunnelSubHeaderWidget
+			);
+			vm.$refs.funnelFooter.initializeComponent(
+				resultMap.cmsContent.FunnelFooterWidget
+			);
+			vm.$refs.customerQuestions.initializeComponent([
+					resultMap.cmsContent.StreetAddressQuestionWidget,
+					resultMap.cmsContent.CityQuestionWidget,
+					resultMap.cmsContent.StateQuestionWidget,
+					resultMap.cmsContent.ZipQuestionWidget,
+					resultMap.cmsContent.AlertVerificationWarningWidget,
+					resultMap.cmsContent.AlertNoMatchWarningWidget,
+					resultMap.cmsContent.FirstNameQuestionWidget,
+					resultMap.cmsContent.LastNameQuestionWidget,
+					resultMap.cmsContent.EmailAddressQuestionWidget,
 
-            ]
-          );
-      });
-  },
-  data(){
-      return {
-
-      }
-  },
-  methods: {
-      arePagePrerequisitesValid() {
-        return store.getters.vehicle.carId !== null;
-      },
-      resetDependentState() {
-        // Invokes
-        store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
-      },
-  },
-  components: {
-      funnelHeader,
-      funnelFooter,
-      vehicleBanner,
-      funnelSubHeader,
-      customerQuestions,
-  },
+				]
+			);
+		});
+	},
+	data() {
+		return {
+			customerQuestions: {
+				addressQuestions: {
+					streetAddress: "",
+					city: "",
+					state: "",
+					zip: "",
+				},
+				firstName: "",
+				lastName: "",
+				emailAddress: "",
+			}   
+		}
+	},
+	methods: {
+		arePagePrerequisitesValid() {
+			return store.getters.vehicle.carId !== null;
+		},
+		resetDependentState() {
+			// Invokes
+			store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
+		},
+	},
+	components: {
+		funnelHeader,
+		funnelFooter,
+		vehicleBanner,
+		funnelSubHeader,
+		customerQuestions,
+	},
 };
 </script>
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index f347264b4..936eb09b6 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -1,38 +1,38 @@
 <template>
-    <div class="row my-4">
-        <div class="col">
-            <textboxQuestion v-model="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 />
-                </div>
-            </div>
-            <div class="row my-4">
-                <div class="col-6">
-                    <dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill />
-                </div>            
-                <div class="col-6">
-                    <textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill />
-                </div>      
-            </div> 
-        </div>
-    </transition>
-    <alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
-        alertClass="alert-warning"
-        :alertHeadline="alertHeadlineVerificationWarning"
-        :alertCopy="alertCopyVerificationWarning"
-        v-bind:isDismissible="false"
-    />
-    <alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
-        alertClass="alert-warning"
-        :alertHeadline="alertHeadlineNoMatchWarning"
-        :alertCopy="alertCopyNoMatchWarning"
-        v-bind:isDismissible="false"
-    />
+	<div class="row my-4">
+		<div class="col">
+			<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="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill />
+				</div>
+			</div>
+			<div class="row my-4">
+				<div class="col-6">
+					<dropdownQuestion v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill />
+				</div>            
+				<div class="col-6">
+					<textboxQuestion v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill />
+				</div>      
+			</div> 
+		</div>
+	</transition>
+	<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
+		alertClass="alert-warning"
+		:alertHeadline="alertHeadlineVerificationWarning"
+		:alertCopy="alertCopyVerificationWarning"
+		v-bind:isDismissible="false"
+	/>
+	<alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
+		alertClass="alert-warning"
+		:alertHeadline="alertHeadlineNoMatchWarning"
+		:alertCopy="alertCopyNoMatchWarning"
+		v-bind:isDismissible="false"
+	/>
 </template>
 
 <script>
@@ -40,208 +40,219 @@ 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",
-    data() {
-        return {
-            showAddressFields: false,
-            displayVerificationWarning: false,
-            displayNoMatchWarning: false,
-            streetAddress: "",
-            city: "",
-            state: "",
-            zip: "",
-            stateOptions: {
-                'AL': 'Alabama',
-                'AK': 'Alaska',
-                'AZ': 'Arizona',
-                'AR': 'Arkansas',
-                'CA': 'California',
-                'CO': 'Colorado',
-                'CT': 'Connecticut',
-                'DE': 'Delaware',
-                'DC': 'District Of Columbia',
-                'FL': 'Florida',
-                'GA': 'Georgia',
-                'HI': 'Hawaii',
-                'ID': 'Idaho',
-                'IL': 'Illinois',
-                'IN': 'Indiana',
-                'IA': 'Iowa',
-                'KS': 'Kansas',
-                'KY': 'Kentucky',
-                'LA': 'Louisiana',
-                'ME': 'Maine',
-                'MD': 'Maryland',
-                'MA': 'Massachusetts',
-                'MI': 'Michigan',
-                'MN': 'Minnesota',
-                'MS': 'Mississippi',
-                'MO': 'Missouri',
-                'MT': 'Montana',
-                'NE': 'Nebraska',
-                'NV': 'Nevada',
-                'NH': 'New Hampshire',
-                'NJ': 'New Jersey',
-                'NM': 'New Mexico',
-                'NY': 'New York',
-                'NC': 'North Carolina',
-                'ND': 'North Dakota',
-                'OH': 'Ohio',
-                'OK': 'Oklahoma',
-                'OR': 'Oregon',
-                'PA': 'Pennsylvania',
-                'RI': 'Rhode Island',
-                'SC': 'South Carolina',
-                'SD': 'South Dakota',
-                'TN': 'Tennessee',
-                'TX': 'Texas',
-                'UT': 'Utah',
-                'VT': 'Vermont',
-                'VA': 'Virginia',
-                'WA': 'Washington',
-                'WV': 'West Virginia',
-                'WI': 'Wisconsin',
-                'WY': 'Wyoming',            
-            },
-            alertHeadlineVerificationWarning: "",
-            alertCopyVerificationWarning: "",
-            alertHeadlineNoMatchWarning: "",
-            alertCopyNoMatchWarning: "",
-        }
-    },
-    props: {
+	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),
+		});
 
-    },
-    methods: {
-        initializeComponent(cmsContent) {
-            this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText);
-            this.$refs.city.initializeComponent(cmsContent[1].QuestionText);
-            this.$refs.state.initializeComponent(cmsContent[2].QuestionText);
-            this.$refs.zip.initializeComponent(cmsContent[3].QuestionText);
+		return { addressModel };
+	},           
+	data() {
+		return {
+			showAddressFields: false,
+			displayVerificationWarning: false,
+			displayNoMatchWarning: false,
+			stateOptions: {
+				'AL': 'Alabama',
+				'AK': 'Alaska',
+				'AZ': 'Arizona',
+				'AR': 'Arkansas',
+				'CA': 'California',
+				'CO': 'Colorado',
+				'CT': 'Connecticut',
+				'DE': 'Delaware',
+				'DC': 'District Of Columbia',
+				'FL': 'Florida',
+				'GA': 'Georgia',
+				'HI': 'Hawaii',
+				'ID': 'Idaho',
+				'IL': 'Illinois',
+				'IN': 'Indiana',
+				'IA': 'Iowa',
+				'KS': 'Kansas',
+				'KY': 'Kentucky',
+				'LA': 'Louisiana',
+				'ME': 'Maine',
+				'MD': 'Maryland',
+				'MA': 'Massachusetts',
+				'MI': 'Michigan',
+				'MN': 'Minnesota',
+				'MS': 'Mississippi',
+				'MO': 'Missouri',
+				'MT': 'Montana',
+				'NE': 'Nebraska',
+				'NV': 'Nevada',
+				'NH': 'New Hampshire',
+				'NJ': 'New Jersey',
+				'NM': 'New Mexico',
+				'NY': 'New York',
+				'NC': 'North Carolina',
+				'ND': 'North Dakota',
+				'OH': 'Ohio',
+				'OK': 'Oklahoma',
+				'OR': 'Oregon',
+				'PA': 'Pennsylvania',
+				'RI': 'Rhode Island',
+				'SC': 'South Carolina',
+				'SD': 'South Dakota',
+				'TN': 'Tennessee',
+				'TX': 'Texas',
+				'UT': 'Utah',
+				'VT': 'Vermont',
+				'VA': 'Virginia',
+				'WA': 'Washington',
+				'WV': 'West Virginia',
+				'WI': 'Wisconsin',
+				'WY': 'Wyoming',            
+			},
+			alertHeadlineVerificationWarning: "",
+			alertCopyVerificationWarning: "",
+			alertHeadlineNoMatchWarning: "",
+			alertCopyNoMatchWarning: "",
+		}
+	},
+	methods: {
+		initializeComponent(cmsContent) {
+			this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText);
+			this.$refs.city.initializeComponent(cmsContent[1].QuestionText);
+			this.$refs.state.initializeComponent(cmsContent[2].QuestionText);
+			this.$refs.zip.initializeComponent(cmsContent[3].QuestionText);
 
-            // assign alert texts to this component
-            this.alertHeadlineVerificationWarning = cmsContent[4].HeadlineText;
-            this.alertCopyVerificationWarning = cmsContent[4].BodyText;
+			// assign alert texts to this component
+			this.alertHeadlineVerificationWarning = cmsContent[4].HeadlineText;
+			this.alertCopyVerificationWarning = cmsContent[4].BodyText;
 
-            this.alertHeadlineNoMatchWarning = cmsContent[5].HeadlineText;
-            this.alertCopyNoMatchWarning = cmsContent[5].BodyText;
-        }
-    },
-    computed: {
+			this.alertHeadlineNoMatchWarning = cmsContent[5].HeadlineText;
+			this.alertCopyNoMatchWarning = cmsContent[5].BodyText;
+		}
+	},
+	mounted() {
 
-    },
-    mounted() {
+		let addressField1 = document.getElementById("autocomplete");
+		let self = this;
 
-        let addressField1 = document.getElementById("autocomplete");
-        let self = this;
+		let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
 
-        let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
+		this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
+			.then(() => {
+				// Script is loaded, initialize the autocomplete textbox
+				const autocomplete = new window.google.maps.places.Autocomplete(
+					addressField1,
+					{
+						componentRestrictions: { country: ["us"] },
+						fields: ["address_components"],
+						types: ["address"],
+					}
+				);
 
-        this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
-            .then(() => {
-                // Script is loaded, initialize the autocomplete textbox
-                const autocomplete = new window.google.maps.places.Autocomplete(
-                    addressField1,
-                    {
-                        componentRestrictions: { country: ["us"] },
-                        fields: ["address_components"],
-                        types: ["address"],
-                    }
-                );
+				// Standard place_changed event handling
+				autocomplete.addListener('place_changed', fillInAddress);
 
-                // Standard place_changed event handling
-                autocomplete.addListener('place_changed', fillInAddress);
+				addressField1.onblur = function() {
+					var hover = document.querySelector(".pac-container .pac-item:hover");
 
-                addressField1.onblur = function() {
-                    var hover = document.querySelector(".pac-container .pac-item:hover");
+					// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
+					if (hover === null) {
+						var item = document.querySelector(".pac-container .pac-item");
+						if (item != null) {
+							var firstResult = item.textContent;
+							var geocoder = new window.google.maps.Geocoder();
+							geocoder.geocode({
+								address: firstResult
+							}, function (results, status) {
+								if (status === window.google.maps.GeocoderStatus.OK) {
+									fillInAddress(results[0]);
+									self.displayVerificationWarning = true;
+									self.displayNoMatchWarning = false;
+								}
+							});
+						}
+						else {
+							self.addressModel.city = "";
+							self.addressModel.state = "";
+							self.addressModel.zip = "";      
+							self.showAddressFields = true;
+							self.displayVerificationWarning = false;
+							self.displayNoMatchWarning = true;
+						}
 
-                    // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
-                    if (hover === null) {
-                        var item = document.querySelector(".pac-container .pac-item");
-                        if (item != null) {
-                            var firstResult = item.textContent;
-                            var geocoder = new window.google.maps.Geocoder();
-                            geocoder.geocode({
-                                address: firstResult
-                            }, function (results, status) {
-                                if (status === window.google.maps.GeocoderStatus.OK) {
-                                    fillInAddress(results[0]);
-                                    self.displayVerificationWarning = true;
-                                    self.displayNoMatchWarning = false;
-                                }
-                            });
-                        }
-                        else {
-                            self.city = "";
-                            self.state = "";
-                            self.zip = "";      
-                            self.showAddressFields = true;
-                            self.displayVerificationWarning = false;
-                            self.displayNoMatchWarning = true;
-                        }
+				
+					}
+				};
 
-                
-                    }
-                };
+				function fillInAddress(place) {
+					if (!place) {
+						place = autocomplete.getPlace();
+					}
 
-                function fillInAddress(place) {
-                    if (!place) {
-                        place = autocomplete.getPlace();
-                    }
+					if (place && place.address_components) {
+						self.addressModel.streetAddress= "";
+						self.showAddressFields = true;
 
-                    if (place && place.address_components) {
-                        self.streetAddress= "";
-                        self.showAddressFields = true;
+						for (const component of place.address_components) {
+							const componentType = component.types[0];
 
-                        for (const component of place.address_components) {
-                            const componentType = component.types[0];
+							switch (componentType) {
+								case "street_number": {
+									self.addressModel.streetAddress  = component.long_name;
+									break;
+								}
+								case "route": {
+									self.addressModel.streetAddress += ' ' + component.short_name;
+									break;
+								}
+								case "locality": {
+									self.addressModel.city = component.long_name;
+									break;
+								}
+								case "administrative_area_level_1": {
+									self.addressModel.state = component.short_name;
+									break;
+								}
+								case "postal_code": {
+									self.addressModel.zip = component.long_name;
+									break;
+								}
 
-                            switch (componentType) {
-                                case "street_number": {
-                                    self.streetAddress  = component.long_name;
-                                    break;
-                                }
-                                case "route": {
-                                    self.streetAddress += ' ' + component.short_name;
-                                    break;
-                                }
-                                case "locality": {
-                                    self.city = component.long_name;
-                                    break;
-                                }
-                                case "administrative_area_level_1": {
-                                    self.state = component.short_name;
-                                    break;
-                                }
-                                case "postal_code": {
-                                    self.zip = component.long_name;
-                                    break;
-                                }
+							}
+						}  
 
-                            }
-                        }  
-
-                        self.displayVerificationWarning = false;
-                        self.displayNoMatchWarning = false; 
-                    } 
-                    else {
-                        self.displayVerificationWarning = true;
-                        self.displayNoMatchWarning = false;
-                    }       
-                }
-            })
-            .catch(() => {
-                // Failed to fetch script
-                console.log("Unable to load Google Places API script");
-            });
-    },
-    components: {
-        textboxQuestion,
-        dropdownQuestion,
-        alert,
-    }
+						self.displayVerificationWarning = false;
+						self.displayNoMatchWarning = false; 
+					} 
+					else {
+						self.displayVerificationWarning = true;
+						self.displayNoMatchWarning = false;
+					}       
+				}
+			})
+			.catch(() => {
+				// Failed to fetch script
+				console.log("Unable to load Google Places API script");
+			});
+	},
+	components: {
+		textboxQuestion,
+		dropdownQuestion,
+		alert,
+	}
 })
 </script>
\ No newline at end of file
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
index 9135c461a..27a7e5486 100644
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue
@@ -1,59 +1,85 @@
 <template>
-    <addressQuestions ref="addressQuestions"/>
-    <div class="row my-4">
-      <div class="col">
-        <textboxQuestion v-model="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 />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill />
-      </div>
-    </div>  
+	<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
+	<div class="row my-4">
+		<div class="col">
+			<textboxQuestion v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill />
+		</div>
+	</div> 
+	<div class="row my-4">
+		<div class="col">
+			<textboxQuestion v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill />
+		</div>
+	</div>
+	<div class="row my-4">
+		<div class="col">
+			<textboxQuestion v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill />
+		</div>
+	</div>  
 </template>
 
 <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(){
-        return {
-            firstName: "",
-            lastName: "",
-            emailAddress: "",
-        }
-    },
-    methods: {
-        initializeComponent(cmsContent){
-            // pass alert texts to addressQuestions component
-            this.$refs.addressQuestions.initializeComponent(cmsContent);
+		name: "customer-questions",
+		emits: ['update:modelValue'], // The component emits an event
+		props: {
+			modelValue: {
+				type: Object,
+				default: () => ({
+					customerQuestions: {
+						addressQuestions: {
+							streetAddress: "",
+							city: "",
+							state: "",
+							zip: "",
+						},
+						firstName: "",
+						lastName: "",
+						emailAddress: "",
+					}          
+				}),
+			}       
+		},    
+		data(){
+			return {
 
-            this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText);
-            this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText);
-            this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText);
-        }
-    },
-    computed: {
-        value: {
-            get: function() {
-                return this.modelValue;
-            },
-            set: function(newValue) {
-                this.$emit("update:modelValue", newValue);
-            }
-        },
-    },
-    components: {
-        addressQuestions,
-        textboxQuestion,
-    }
+			}
+		},
+		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){
+					// pass alert texts to addressQuestions component
+					this.$refs.addressQuestions.initializeComponent(cmsContent);
+
+					this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText);
+					this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText);
+					this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText);
+			}
+		},
+		computed: {
+			value: {
+					get: function() {
+							return this.modelValue;
+					},
+					set: function(newValue) {
+							this.$emit("update:modelValue", newValue);
+					}
+			},
+		},
+		components: {
+			addressQuestions,
+			textboxQuestion,
+		}
 })
 </script>
\ No newline at end of file