diff --git a/src/action-bar-button/index.js b/src/action-bar-button/index.js
index 4699e16ef..d18c2ff8b 100644
--- a/src/action-bar-button/index.js
+++ b/src/action-bar-button/index.js
@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { createNamespace } from '../utils';
 import { route, routeProps } from '../utils/router';
 import { useParent } from '../api/use-relation';
@@ -19,13 +19,13 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const { parent, index } = useParent(ACTION_BAR_KEY, ref(true));
+    const { parent, index } = useParent(ACTION_BAR_KEY, { isButton: true });
 
     const isFirst = computed(() => {
       if (parent) {
         const children = parent.children.value;
         const prev = children[index.value - 1];
-        return !(prev && prev.value);
+        return !(prev && prev.isButton);
       }
     });
 
@@ -33,7 +33,7 @@ export default createComponent({
       if (parent) {
         const children = parent.children.value;
         const next = children[index.value + 1];
-        return !(next && next.value);
+        return !(next && next.isButton);
       }
     });
 
diff --git a/src/api/use-relation.ts b/src/api/use-relation.ts
index 96fffc4c3..a91a3efe3 100644
--- a/src/api/use-relation.ts
+++ b/src/api/use-relation.ts
@@ -1,13 +1,10 @@
-import { ref, Ref, inject, computed, onUnmounted } from 'vue';
+import { Ref, inject, computed, onUnmounted } from 'vue';
 
 export type Parent<T = unknown> = null | {
-  children: Ref<Ref<T>[]>;
+  children: Ref<T[]>;
 };
 
-export function useParent<T = unknown>(
-  key: string,
-  child: Ref<T> = ref() as Ref<T>
-) {
+export function useParent<T = unknown>(key: string, child: T = {} as T) {
   const parent = inject<Parent<T>>(key, null);
 
   if (parent) {