diff --git a/assets/js/components/Config/MeterModal.vue b/assets/js/components/Config/MeterModal.vue
index d930bdd43..f2990d968 100644
--- a/assets/js/components/Config/MeterModal.vue
+++ b/assets/js/components/Config/MeterModal.vue
@@ -41,6 +41,7 @@
 								<select
 									id="meterTemplate"
 									v-model="templateName"
+									@change="templateChanged"
 									:disabled="!isNew"
 									class="form-select w-100"
 								>
@@ -62,7 +63,6 @@
 										{{ option.name }}
 									</option>
 								</select>
-								{{ templateName }}
 							</FormRow>
 							<p v-if="loadingTemplate">Loading ...</p>
 							<Modbus
@@ -314,7 +314,6 @@ export default {
 		},
 		async loadTemplate() {
 			this.template = null;
-			this.reset();
 			this.loadingTemplate = true;
 			try {
 				const opts = {
@@ -405,6 +404,9 @@ export default {
 		selectType(type) {
 			this.selectedType = type;
 		},
+		templateChanged() {
+			this.reset();
+		},
 	},
 };
 </script>
diff --git a/assets/js/components/Config/VehicleModal.vue b/assets/js/components/Config/VehicleModal.vue
index 77d5c6450..8d9539e9e 100644
--- a/assets/js/components/Config/VehicleModal.vue
+++ b/assets/js/components/Config/VehicleModal.vue
@@ -29,6 +29,7 @@
 								<select
 									id="vehicleTemplate"
 									v-model="templateName"
+									@change="templateChanged"
 									:disabled="!isNew"
 									class="form-select w-100"
 								>
@@ -259,7 +260,6 @@ export default {
 		},
 		async loadTemplate() {
 			this.template = null;
-			this.reset();
 			try {
 				const opts = {
 					params: {
@@ -341,6 +341,9 @@ export default {
 		modalInvisible() {
 			this.isModalVisible = false;
 		},
+		templateChanged() {
+			this.reset();
+		},
 	},
 };
 </script>