updated to clear other areas of the vehicle when previous areas are changed

src/layouts/vehicle-make/vehicle-make.vue

@@ -90,7 +90,10 @@
         },
         watch: {
           selectedMake(make) {
-            this.mainStore.updateVehicleMake(make); 
+            if(make != this.mainStore.order.vehicle.make)
+            {
+              this.mainStore.updateVehicle({make, model: null, style: null}); 
+            }
             this.$router.navigate(
               this.navigationScenarios.SELECTED_MAKE,
               this.$route

src/layouts/vehicle-model/vehicle-model.vue

@@ -83,7 +83,10 @@
   
     watch: {
       selectedModel(model) {
-        this.mainStore.updateVehicleModel(model);
+        if(model != this.mainStore.order.vehicle.model)
+        {
+          this.mainStore.updateVehicle({model, style: null});
+        }
         this.$router.navigate(
           this.navigationScenarios.SELECTED_MODEL,
           this.$route

src/layouts/vehicle-style/vehicle-style.vue

@@ -77,8 +77,12 @@ export default {
 
     watch: {
         selectedStyle(style) {
-            this.mainStore.updateVehicle({style})
+            if(style != this.mainStore.order.vehicle.style)
-            this.mainStore.setVehicle(style).then(() => {
+            {
+                this.mainStore.updateVehicle({style});
+            }
+            
+            this.mainStore.setVehicle().then(() => {
                 this.$router.navigate(
                     this.navigationScenarios.SELECTED_STYLE,
                     this.$route

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

@@ -69,7 +69,11 @@
     watch: {
       selectedYear(year) {
         const parsedYear = parseInt(year);
-        this.mainStore.updateVehicleYear(parsedYear); 
+        if(parsedYear != this.mainStore.order.vehicle.year)
+        {
+          this.mainStore.updateVehicle({year: parsedYear, make: null, model: null, style: null}); 
+        }
+        
         this.$router.navigate(
           this.navigationScenarios.SELECTED_YEAR,
           this.$route