Vue routers children не работает?

import Index from './Index.vue'
import FoodItems from './Foods/Items.vue'
import FoodNew from './Foods/New.vue'
import FoodEdit from './Foods/New.vue'
import OrderItems from './Orders/Items.vue'

export const VIEW = {
    Index,
    FoodItems,
    FoodNew,
    FoodEdit,
    OrderItems
}

import Vue from "vue"
import Router from "vue-router"

import {VIEW} from "./views/index"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "Index",
      component: VIEW.Index
    },
    {
      path: "/foods",
      name: "Foods Items",
      component: VIEW.FoodItems,
      children: [
        {
          path: "new",
          component: VIEW.FoodNew
        },
        {
          path: "edit",
          component: VIEW.FoodEdit
        }
      ],
    },
    {
      path: "/orders",
      name: "Orders Items",
      component: VIEW.OrderItems
    },
    {
      path: "/about",
      name: "About",
      component: () => import( "./views/About.vue")
    }
  ]
})