Vue version

3.2.45

Link to minimal reproduction

https://github.com/DOOMitru/async-components-keep-alive-include

Steps to reproduce

In the example repo, there are 3 router links that switch between 3 asynchronously loaded route components - Home, About, Contact. Keep-alive is used to wrap the loaded router view components. Each component contains an input bound to an internal state variable in order to establish state changes for each component.

What is expected?

Case 1: Keep-Alive is used without parameters

• The state for each component should be maintained between router view changes.

Case 2: Keep-Alive is used with parameter: :include="['about']"

• The state for the About component should be maintained between router view changes.
• The state for the other 2 components should be reset between router view changes.

Case 3: Keep-Alive is used with parameter: :exclude="['about']"

• The state for the About component should be reset between router view changes.
• The state for the other 2 components should be maintained between router view changes.

What is actually happening?

Case 1: Works as expected.

Case 2: The state is reset for all components

Case 3: The state is maintained for all components

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
    Memory: 15.87 GB / 31.96 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 108.0.5359.125
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.76)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.2.45 => 3.2.45

Any additional comments?

This may be related to issue #3529

component name defaulut = file name

@hminghe is correct. Somehow I missed The match is checked against the component's name in the vue docs and for some reason I assumed it was using the name of the route.