diff --git a/src/components/space/index.vue b/src/components/space/index.vue
index 74aca32..310dfe1 100644
--- a/src/components/space/index.vue
+++ b/src/components/space/index.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Comment, Fragment, Teleport, defineComponent, h, isVNode, onBeforeUpdate, useSlots } from "vue";
+import { Comment, Fragment, Teleport, defineComponent, h, isVNode, useSlots } from "vue";
 import type { CSSProperties, PropType, VNode, VNodeChild } from "vue";
 import type { SpaceProps, SpaceSlots, SpaceSize } from "./type";
 
@@ -76,15 +76,9 @@ const props = defineProps({
 
 const slots = useSlots() as SpaceSlots;
 
-let children = flattenChildren(slots.default?.() ?? []);
-let separatorContent = resolveSeparatorContent();
-let hasSeparator = hasSeparatorContent(separatorContent);
-
-onBeforeUpdate(() => {
-	children = flattenChildren(slots.default?.() ?? []);
-	separatorContent = resolveSeparatorContent();
-	hasSeparator = hasSeparatorContent(separatorContent);
-});
+const children = computed(() => flattenChildren(slots.default?.() ?? []));
+const separatorContent = computed(() => resolveSeparatorContent());
+const hasSeparator = computed(() => hasSeparatorContent(separatorContent.value));
 
 function resolveSeparatorContent(): VNodeChild | undefined {
 	if (props.separator !== undefined) {