How vue how parent routes are redirected to child routes

On the

home page, I want him to display the product subcomponent by default. I added a redirect, but it didn"t work. Did I write it wrong?
index.vue

<div id="main">
    <div>
      <div id="left" class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
        <router-link class="list-group-item hover-class" to="/product">product</router-link>
        <router-link class="list-group-item hover-class" to="/work">work</router-link>
        <router-link class="list-group-item hover-class" to="/contact">contact</router-link>
      </div>
      <div id="right" class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
        <router-view></router-view>
      </div>
    </div>
  </div>

index.js

routes: [
    {
      path: "/",
      name: "Index",
      component: Index,
      children: [
        {
          path: "/product",
          name: "Product",
          component: Product
        },
        {
          path: "/work",
          component: Work
        },
        {
          path: "/contact",
          component: Contact
        }
      ]
    },
    {
      path: "/",
      redirect: "/product"
    }
  ]
Jun.03,2021

just put redirect:'/ product' on the first routing object.
change it to this

.
routes: [
    {
      path: '/',
      name: 'Index',
      redirect: '/product',
      component: Index,
      children: [
        {
          path: '/product',
          name: 'Product',
          component: Product
        },
        {
          path: '/work',
          component: Work
        },
        {
          path: '/contact',
          component: Contact
        }
      ]
    },
  ]
Menu