diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index 0d6f189d..865d5bad 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -13,7 +13,7 @@
     :cols="{ lg: 12, md: 12, sm: 12, xs: 4, xxs: 2 }"
     :col-num="12"
     @layout-updated="layoutUpdatedEvent"
-    @breakpoint-changed="breakpointChanged"
+    @update:breakpoint="breakpointChanged"
   >
     <template #default="{ gridItemProps }">
       <grid-item
@@ -177,8 +177,8 @@ const botStore = useBotStore();
 const layoutStore = useLayoutStore();
 const currentBreakpoint = ref('');
 
-const breakpointChanged = (newBreakpoint) => {
-  //   // console.log('breakpoint:', newBreakpoint);
+const breakpointChanged = (newBreakpoint: string) => {
+  // console.log('breakpoint:', newBreakpoint);
   currentBreakpoint.value = newBreakpoint;
 };
 const isResizableLayout = computed(() =>
diff --git a/src/views/TradingView.vue b/src/views/TradingView.vue
index d928e0bf..aad5a4a4 100644
--- a/src/views/TradingView.vue
+++ b/src/views/TradingView.vue
@@ -169,7 +169,7 @@ const botStore = useBotStore();
 const layoutStore = useLayoutStore();
 const currentBreakpoint = ref('');
 
-const breakpointChanged = (newBreakpoint) => {
+const breakpointChanged = (newBreakpoint: string) => {
   // console.log('breakpoint:', newBreakpoint);
   currentBreakpoint.value = newBreakpoint;
 };