Routed ons-page are always hidden when rendering with Nuxt.js

Fnxxxxo

I manually config the vue-router of Nuxt and try to render pages using layout-pages way.
Layouts are rendered but the index page is hidden because of lack of the shown attribute. The :index.sync prop seems to not change when debugging with devtools.
Are there any way to fix it?

Here is my default layout template: (This ons-page is OK)

<template>
  <v-ons-page>
    <v-ons-tabbar swipeable>
      <nuxt slot="pages"/>
      <v-ons-tab v-for="(tab, idx) in tabs"
                 icon="app-menu"
                 :label="tab.label"
                 :key="idx"
                 :active="$route.name === tab.name"
                 @click.prevent="$router.push({name: tab.name})"/>
    </v-ons-tabbar>
  </v-ons-page>
</template>

Here is the index: (Lack the shown is always missing, regardless routing)

<template>
  <v-ons-page shown>
    <v-ons-list modifier="dark">
      <component :is="floor.name" :floor="floor.data" v-for="floor in floors" :key="floor.id"/>
    </v-ons-list>
  </v-ons-page>
</template>

The routing:

const index = () => import('~/pages/index.vue').then(m => m.default || m)
const info = () => import('~/pages/info.vue').then(m => m.default || m)

export function createRouter() {
  return new Router({
    mode: 'hash',
    routes: [
      {
        path: '/',
        redirect: '/index'
      },
      {
        path: '/index',
        name: 'index',
        component: index
      },
      {
        path: '/info',
        name: 'info',
        component: info
      }
    ]
  })
}