diff --git a/src/action-bar-button/index.js b/src/action-bar-button/index.js
index 084da9fd4..2281f5af2 100644
--- a/src/action-bar-button/index.js
+++ b/src/action-bar-button/index.js
@@ -24,16 +24,14 @@ export default createComponent({
 
     const isFirst = computed(() => {
       if (parent) {
-        const children = parent.children.value;
-        const prev = children[index.value - 1];
+        const prev = parent.children[index.value - 1];
         return !(prev && prev.isButton);
       }
     });
 
     const isLast = computed(() => {
       if (parent) {
-        const children = parent.children.value;
-        const next = children[index.value + 1];
+        const next = parent.children[index.value + 1];
         return !(next && next.isButton);
       }
     });
diff --git a/src/action-bar/index.js b/src/action-bar/index.js
index fc45a966a..ee4126af7 100644
--- a/src/action-bar/index.js
+++ b/src/action-bar/index.js
@@ -1,4 +1,4 @@
-import { ref, provide } from 'vue';
+import { provide, reactive } from 'vue';
 import { createNamespace } from '../utils';
 
 const [createComponent, bem] = createNamespace('action-bar');
@@ -14,9 +14,9 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    provide(ACTION_BAR_KEY, {
-      children: ref([]),
-    });
+    const children = reactive([]);
+
+    provide(ACTION_BAR_KEY, { children });
 
     return () => (
       <div class={bem({ unfit: !props.safeAreaInsetBottom })}>
diff --git a/src/api/use-relation.ts b/src/api/use-relation.ts
index a91a3efe3..658deab55 100644
--- a/src/api/use-relation.ts
+++ b/src/api/use-relation.ts
@@ -1,14 +1,14 @@
-import { Ref, inject, computed, onUnmounted } from 'vue';
+import { inject, computed, onUnmounted } from 'vue';
 
 export type Parent<T = unknown> = null | {
-  children: Ref<T[]>;
+  children: T[];
 };
 
 export function useParent<T = unknown>(key: string, child: T = {} as T) {
   const parent = inject<Parent<T>>(key, null);
 
   if (parent) {
-    const children = parent.children.value;
+    const { children } = parent;
     const index = computed(() => children.indexOf(child));
 
     children.push(child);
diff --git a/src/collapse/index.js b/src/collapse/index.js
index b2cfe9acc..f26af775e 100644
--- a/src/collapse/index.js
+++ b/src/collapse/index.js
@@ -1,4 +1,4 @@
-import { ref, provide } from 'vue';
+import { provide, reactive } from 'vue';
 import { createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
@@ -19,7 +19,7 @@ export default createComponent({
   emits: ['change', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const children = ref([]);
+    const children = reactive([]);
 
     const toggle = (name, expanded) => {
       const { accordion, modelValue } = props;
diff --git a/src/row/index.js b/src/row/index.js
index 99f841aac..7aed35600 100644
--- a/src/row/index.js
+++ b/src/row/index.js
@@ -1,4 +1,4 @@
-import { ref, computed, provide } from 'vue';
+import { provide, computed, reactive } from 'vue';
 import { createNamespace } from '../utils';
 
 const [createComponent, bem] = createNamespace('row');
@@ -21,13 +21,13 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const children = ref([]);
+    const children = reactive([]);
 
     const groups = computed(() => {
       const groups = [[]];
 
       let totalSpan = 0;
-      children.value.forEach((getSpan, index) => {
+      children.forEach((getSpan, index) => {
         totalSpan += getSpan();
 
         if (totalSpan > 24) {
diff --git a/src/sidebar/index.js b/src/sidebar/index.js
index e29ae8a1b..6f378b39a 100644
--- a/src/sidebar/index.js
+++ b/src/sidebar/index.js
@@ -1,4 +1,4 @@
-import { ref, watch, provide } from 'vue';
+import { watch, provide, reactive } from 'vue';
 import { createNamespace } from '../utils';
 
 const [createComponent, bem] = createNamespace('sidebar');
@@ -16,7 +16,7 @@ export default createComponent({
   emits: ['change', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const children = ref([]);
+    const children = reactive([]);
     const active = () => +props.modelValue;
     const setActive = (value) => {
       if (value !== active()) {