encapsulated api, widget parsing into component

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

@@ -4,7 +4,7 @@
     <div class="select-car-form rounded text-center">
       <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
       <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+      <yearQuestion v-model="selectedYear" ref="yearQuestion" />
     </div>
   </div>
 </template>
@@ -18,15 +18,11 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import store from "@/store";
-import { storeActions } from "@/constants/store-actions.js";
 export default {
   name: "vehicle-year",
   data() {
     return {
       pageHeaderWidgets: {},
-      radioQuestionWidgets: {},
-      vehicleYears: [],
       siteHeaderWidget: {},
       vehicleBannerWidget: {},
       selectedYear: null
@@ -38,7 +34,7 @@ export default {
 
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    const yearQuestionInitialDataPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
+    const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
 
     // Settle promises and get results
     const promiseResultMap = [
@@ -57,9 +53,8 @@ export default {
       next((vm) => {
         vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
         vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
-        vm.radioQuestionWidgets = resultMap.cmsContent.RadioQuestionWidget[0];
         vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
-        vm.vehicleYears = resultMap.yearQuestionInitialData;
+        vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData);
       });
     });
   },

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

@@ -8,22 +8,33 @@
 
 <script>
 import radioQuestion from "@/common-components/radio-question/radio-question";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
 
 export default {
     name: "year-question",
     data(){
         return {
-            selectedYear: null
+            questionText: null,
+            selectedYear: null,
+            years: Array,
         }
     },
     props: {
-        questionText: String,
-        years: Array, 
         modelValue: String
     },
     components: {
         radioQuestion,
     },
+    methods: {
+        loadInitialData() {
+            return store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
+        },
+        initializeComponent(cmsContent, initialData) {
+            this.questionText = cmsContent.QuestionText;
+            this.years = initialData;
+        }
+    },
     watch: {
         selectedYear(val) {
             this.$emit('update:modelValue', val)