fix(runtime-dom): fix multi vShow impact each other

close vuejs#10338

Author: Doctor-wu

packages/runtime-dom/src/directives/vShow.ts

@@ -7,6 +7,8 @@ interface VShowElement extends HTMLElement {
   [vShowOldKey]: string
 }
 
+const resolvedPromise = Promise.resolve()
+
 export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
   beforeMount(el, { value }, { transition }) {
     el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
@@ -24,21 +26,24 @@ export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
   updated(el, { value, oldValue }, { transition }) {
     if (
       !value === !oldValue &&
-      (el.style.display === el[vShowOldKey] || !value)
+      (el.style.display === el[vShowOldKey] || (!value && transition))
     )
       return
     if (transition) {
       if (value) {
         transition.beforeEnter(el)
-        setDisplay(el, true)
+        postSetDisplay(el, true)
         transition.enter(el)
       } else {
         transition.leave(el, () => {
-          setDisplay(el, false)
+          postSetDisplay(el, false)
         })
       }
     } else {
-      setDisplay(el, value)
+      // #10038
+      // when multi vShow be applied to the same element
+      // and the sync setDisplay will impact other vShow
+      postSetDisplay(el, value)
     }
   },
   beforeUnmount(el, { value }) {
@@ -54,6 +59,12 @@ function setDisplay(el: VShowElement, value: unknown): void {
   el.style.display = value ? el[vShowOldKey] : 'none'
 }
 
+function postSetDisplay(el: VShowElement, value: unknown): void {
+  resolvedPromise.then(() => {
+    setDisplay(el, value)
+  })
+}
+
 // SSR vnode transforms, only used when user includes client-oriented render
 // function in SSR
 export function initVShowForSSR() {