Не удается отобразить дочерний компонент с помощью VueRouter

Я изучаю VueJS, создал новое приложение Vue с помощью vue-cli и немного изменил его. Вот что у меня есть в router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Panel from '@/components/Panel'
import Search from '@/components/Search'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/panel',
      name: 'Panel',
      component: Panel,
      children: {
        path: 'search',
        component: Search
      }
    }
  ]
})

Мой Panel.vue отображается правильно без «дочернего» ключа в объекте маршрутизатора. Это содержание:

<template>
  <div class="panel">
    <h1>Panel</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'panel',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

И Search.vue очень похож

<template>
  <div class="search">
    <h1>Search</h1>
    <p>Lorem ipsum ...</p>
  </div>
</template>

<script>
export default {
  name: 'search',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

С этой конфигурацией, как описано здесь: https://router.vuejs.org/en/essentials/nested-routes.html

Я получаю эту ошибку:

vue-router.common.js?37ec:598Uncaught TypeError: route.children.some не является функцией

И отображается пустая страница.

Я хочу, например, чтобы localhost:port/#/panel отображал только компонент Panel (это не так важно).

И localhost:port/#/panel/search для отображения компонента Search, обернутого компонентом Panel (это важная часть, потому что на самом деле никто не пойдет только к /panel).

Может ли кто-нибудь помочь?