fix: layout sidebar collapsed, close #5373

components/layout/Sider.tsx

@@ -1,15 +1,6 @@
 import classNames from '../_util/classNames';
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
-import {
+import { inject, defineComponent, ref, watch, onMounted, onBeforeUnmount, provide } from 'vue';
-  watchEffect,
-  inject,
-  defineComponent,
-  ref,
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  provide,
-} from 'vue';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
@@ -123,7 +114,9 @@ export default defineComponent({
     siderHook && siderHook.addSider(uniqueId);
 
     onMounted(() => {
-      watchEffect(() => {
+      watch(
+        () => props.breakpoint,
+        () => {
           try {
             mql?.removeEventListener('change', responsiveHandler);
           } catch (error) {
@@ -141,7 +134,11 @@ export default defineComponent({
               responsiveHandler(mql);
             }
           }
-      });
+        },
+        {
+          immediate: true,
+        },
+      );
     });
     onBeforeUnmount(() => {
       try {