lazy-loaded component using keep-alive in Vue2 only render once

Question

I am using keep-alive to cache some pages in my Vue.js application, and most of them work fine. However, for a few pages that use lazy-loaded components, the pages render normally when I refresh the page or open it for the first time. But when I switch to other pages and then come back, the page goes blank.

This issue only occurs on the first page that was opened, while other pages imported in the same way perform normally as long as they are not the first page opened.

router-view.vue

      <div>
       <transition :name="transitionName">
          <keep-alive :max="maxPageCache" :include="keepAlive">
             <router-view :key="routerViewKey" />
          </keep-alive>
       </transition>
      <div>

...
let keepAlive = ['a','b']
...

page.vue

      <template>
           <list-template v-if="xxx"/>
           <something v-else />
      </template>
      import listTemplate from './list-template.vue'
      ...
      name:'a',
      components:{
       'list-template': listTemplate,
       'something': ()=>import('./something.vue')
      }
      ...

list-template.vue

      <template>
           <list />
      </template>
      ...

components.js

...
Vue.component('List',()=>import('./list'))
...

I have checked:

• the componentInstance is cached by keep-alive,but 'this.$vnode.componentInstance.$el.--vue--' is null
• activated and deactivated hooks work fine
• the keys and names are correct
• vue.js devtools:I can see the lazy-loaded component props and states,but no render time when activated
• no errors

I found that if I delete the "key" of the route-view, or don't use lazy-loaded component, or wrap the lazy-loaded component with a div or insert something before the lazy-loaded component, all the pages work fine and the problem is solved.

But I don't know why this issue occurs and why it can be solved in these ways.