I want to change the menu that consists of 2 depths to 3 depths.

I succeeded in adding a 3 depth menu, but I have a problem with moving it like the 2 depth arrow.

Is there a way to move the 2 depth and 3 depth arrows separately?

<template>
  <div v-if="!item.hidden && item.children" class="menu-wrapper">
    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
      <app-link :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon" :title="$t(onlyOneChild.meta.title)"/>
        </el-menu-item>
      </app-link>
    </template>
    <el-submenu v-else ref="submenu" :index="item.path">
      <template slot="title">
        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title"/>
      </template>
      <template v-for="(child, index) in item.children" v-if="!child.hidden">
        <sidebar-item v-if="child.children && child.children.length > 0" :is-nest="true" :item="child" :key="child.path + index" :base-path="resolvePath(child.path)" class="nest-menu"/>
        <app-link v-else :to="resolvePath(child.path)" :key="child.name">
          <el-menu-item :index="resolvePath(child.path)">
            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title"/>
          </el-menu-item>
        </app-link>
      </template>
    </el-submenu>
  </div>
</template>