diff --git a/assets/js/components/Tariff/SmartCostLimit.vue b/assets/js/components/Tariff/SmartCostLimit.vue
index 45afe638c..47036420a 100644
--- a/assets/js/components/Tariff/SmartCostLimit.vue
+++ b/assets/js/components/Tariff/SmartCostLimit.vue
@@ -88,10 +88,10 @@ import TariffChart from "./TariffChart.vue";
 import { CO2_TYPE } from "@/units";
 import api, { allowClientError } from "@/api";
 import convertRates from "@/utils/convertRates";
-import type { PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 import type { Tariff, CURRENCY, Rate, SelectOption, Slot } from "@/types/evcc";
 
-export default {
+export default defineComponent({
 	name: "SmartCostLimit",
 	components: { TariffChart },
 	mixins: [formatter],
@@ -358,7 +358,7 @@ export default {
 			}
 		},
 	},
-};
+});
 </script>
 
 <style scoped>
diff --git a/assets/js/components/Tariff/TariffChart.vue b/assets/js/components/Tariff/TariffChart.vue
index 0e626351c..8bf23b748 100644
--- a/assets/js/components/Tariff/TariffChart.vue
+++ b/assets/js/components/Tariff/TariffChart.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 import "@h2d2/shopicons/es/regular/arrowright";
 import { is12hFormat } from "@/units";
 import PlanEndIcon from "../MaterialIcon/PlanEnd.vue";
@@ -62,7 +62,7 @@ import type { Slot } from "@/types/evcc";
 
 const BAR_WIDTH = 20;
 
-export default {
+export default defineComponent({
 	name: "TariffChart",
 	components: {
 		PlanEndIcon,
@@ -169,7 +169,7 @@ export default {
 			return is12hFormat() ? hour % 12 : hour;
 		},
 	},
-};
+});
 </script>
 
 <style scoped>