I don"t like using plug-ins

want to implement a list of multi-layer telescopic folds

at present, the picture is the effect that comes out of my stool. Do you have any good logic for unfolding and merging?

html:

.list(v-for="(i, n) in treeData" :key="n" :title="i.name")
  i.iconfont.icon-webicon215.arrowIcon(v-show="i.child")
  span {{i.name}}
  .list(v-for="(s, n) in i.child" :key="n" :title="s.name" :style="{textIndent: s.child ? ".8em": "1.6em"}" @click="show(n, s.name)")
    i.iconfont.icon-webicon215.arrowIcon(:style="{color: s.child ? "-sharpc0c4cc": "transparent"}")
    span {{s.name}}
    .list(v-if="s.child" v-for="(q, n) in s.child" :key="n" :title="q.name" :style="{textIndent: q.child ? "1.6em": "2.4em"}" @click="show(n, q.name)")
      i.iconfont.icon-webicon215.arrowIcon(:style="{color: q.child ? "-sharpc0c4cc": "transparent"}")
      span {{q.name}}