diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
index 0a4b3aa41..140338265 100644
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@@ -1,8 +1,8 @@
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, reactive } from 'vue';
 import { flattenChildren } from '../_util/props-util';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import { useToken } from '../theme/internal';
-import type { ExtractPropTypes, PropType, ComputedRef } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import type { SizeType } from '../config-provider';
 import devWarning from '../vc-util/devWarning';
 import createContext from '../_util/createContext';
@@ -16,7 +16,7 @@ export const buttonGroupProps = () => ({
 
 export type ButtonGroupProps = Partial<ExtractPropTypes<ReturnType<typeof buttonGroupProps>>>;
 export const GroupSizeContext = createContext<{
-  size: ComputedRef<SizeType>;
+  size: SizeType;
 }>();
 export default defineComponent({
   compatConfig: { MODE: 3 },
@@ -25,9 +25,11 @@ export default defineComponent({
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('btn-group', props);
     const [, , hashId] = useToken();
-    GroupSizeContext.useProvide({
-      size: computed(() => props.size),
-    });
+    GroupSizeContext.useProvide(
+      reactive({
+        size: computed(() => props.size),
+      }),
+    );
     const classes = computed(() => {
       const { size } = props;
       let sizeCls = '';
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 311249ab2..47cbbb6b0 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -41,7 +41,7 @@ export default defineComponent({
   setup(props, { slots, attrs, emit }) {
     const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
     const [wrapSSR, hashId] = useStyle(prefixCls);
-    const { size: groupSize } = GroupSizeContext.useInject();
+    const groupSizeContext = GroupSizeContext.useInject();
     const buttonNodeRef = ref<HTMLElement>(null);
     const delayTimeoutRef = ref(undefined);
     let isNeedInserted = false;
@@ -81,7 +81,7 @@ export default defineComponent({
       const pre = prefixCls.value;
 
       const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
-      const sizeFullname = compactSize.value || groupSize?.value || size.value;
+      const sizeFullname = compactSize.value || groupSizeContext?.size || size.value;
       const sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
 
       return [