fix(keep-alive): include/exclude should work with async component (#3531)

fix #3529

packages/runtime-core/src/apiAsyncComponent.ts

@@ -13,6 +13,8 @@ import { defineComponent } from './apiDefineComponent'
 import { warn } from './warning'
 import { ref } from '@vue/reactivity'
 import { handleError, ErrorCodes } from './errorHandling'
+import { isKeepAlive } from './components/KeepAlive'
+import { queueJob } from './scheduler'
 
 export type AsyncComponentResolveResult<T = Component> = T | { default: T } // es modules
 
@@ -109,8 +111,14 @@ export function defineAsyncComponent<
   }
 
   return defineComponent({
-    __asyncLoader: load,
     name: 'AsyncComponentWrapper',
+
+    __asyncLoader: load,
+
+    get __asyncResolved() {
+      return resolvedComp
+    },
+
     setup() {
       const instance = currentInstance!
 
@@ -174,6 +182,11 @@ export function defineAsyncComponent<
       load()
         .then(() => {
           loaded.value = true
+          if (instance.parent && isKeepAlive(instance.parent.vnode)) {
+            // parent is keep-alive, force update so the loaded component's
+            // name is taken into account
+            queueJob(instance.parent.update)
+          }
         })
         .catch(err => {
           onError(err)

packages/runtime-core/src/componentOptions.ts

@@ -189,6 +189,11 @@ export interface ComponentOptionsBase<
    * @internal
    */
   __asyncLoader?: () => Promise<ConcreteComponent>
+  /**
+   * the inner component resolved by the AsyncComponentWrapper
+   * @internal
+   */
+  __asyncResolved?: ConcreteComponent
   /**
    * cache for merged $options
    * @internal

packages/runtime-core/src/components/KeepAlive.ts

@@ -36,6 +36,7 @@ import {
 import { setTransitionHooks } from './BaseTransition'
 import { ComponentRenderContext } from '../componentPublicInstance'
 import { devtoolsComponentAdded } from '../devtools'
+import { isAsyncWrapper } from '../apiAsyncComponent'
 
 type MatchPattern = string | RegExp | string[] | RegExp[]
 
@@ -257,7 +258,15 @@ const KeepAliveImpl: ComponentOptions = {
 
       let vnode = getInnerChild(rawVNode)
       const comp = vnode.type as ConcreteComponent
-      const name = getComponentName(comp)
+
+      // for async components, name check should be based in its loaded
+      // inner component if available
+      const name = getComponentName(
+        isAsyncWrapper(vnode)
+          ? (vnode.type as ComponentOptions).__asyncResolved || {}
+          : comp
+      )
+
       const { include, exclude, max } = props
 
       if (