fix(components): [tooltip] remove some references in time (#20495)

* fix(components): [tooltip] remove references to stopHandle and popperInstance in time

* fix

packages/components/popper/src/composables/use-content.ts

@@ -61,7 +61,9 @@ export const usePopperContent = (props: PopperContentProps) => {
   const { attributes, state, styles, update, forceUpdate, instanceRef } =
     usePopper(computedReference, contentRef, options)
 
-  watch(instanceRef, (instance) => (popperInstanceRef.value = instance))
+  watch(instanceRef, (instance) => (popperInstanceRef.value = instance), {
+    flush: 'sync',
+  })
 
   onMounted(() => {
     watch(

packages/components/tooltip/src/content.vue

@@ -44,7 +44,7 @@
 
 <script lang="ts" setup>
 import { computed, inject, onBeforeUnmount, ref, unref, watch } from 'vue'
-import { onClickOutside } from '@vueuse/core'
+import { computedEager, onClickOutside } from '@vueuse/core'
 import { useNamespace, usePopperContainerId } from '@element-plus/hooks'
 import { composeEventHandlers } from '@element-plus/utils'
 import { ElPopperContent } from '@element-plus/components/popper'
@@ -65,6 +65,7 @@ const { selector } = usePopperContainerId()
 const ns = useNamespace('tooltip')
 
 const contentRef = ref<PopperContentInstance>()
+const popperContentRef = computedEager(() => contentRef.value?.popperContentRef)
 let stopHandle: ReturnType<typeof onClickOutside>
 const {
   controlled,
@@ -143,18 +144,13 @@ const onBeforeLeave = () => {
 
 const onAfterShow = () => {
   onShow()
-  stopHandle = onClickOutside(
-    computed(() => {
-      return contentRef.value?.popperContentRef
-    }),
-    () => {
-      if (unref(controlled)) return
-      const $trigger = unref(trigger)
-      if ($trigger !== 'hover') {
-        onClose()
-      }
+  stopHandle = onClickOutside(popperContentRef, () => {
+    if (unref(controlled)) return
+    const $trigger = unref(trigger)
+    if ($trigger !== 'hover') {
+      onClose()
     }
-  )
+  })
 }
 
 const onBlur = () => {