Method of implementing recursive components based on Vue technology

<!-- tree tree component-->
<template>
  <div class="container">
      <div v-for="item in treeData" :key="item">
        <div class="row" @click="extend(item)">
            <span
                ref="icon"
                class="icon-common"
                :class="{
                    'icon-down': item.children,
                    'icon-radio': !item.children,
                    'icon-rotate': item.isExtend
                }"
            ></span>
            <span class="title">{{ item.title }}</span>
        </div>
        <div v-if="isExtend(item)" class="children">
            <tree :tree-data="item.children" :is-extend-all="isExtendAll" />
        </div>
  </div>
  </div>
</template>

<script>
export default {
    props: {
        // Component data treeData: {
            type: Array,
            default: [],
        },
        // Whether to expand all by default isExtendAll: {
            type: Boolean,
            default: true,
        }
    },
    methods: {
        // Expand the list extend(item) {
            if (item.children) {
                item.isExtend = !item.isExtend;
            }
        },
        isExtend(item) {
            const isExtend = !item.isExtend && true;
            return this.isExtendAll ? isExtend : !isExtend;
        }
    }
}
</script>

<style scoped>
.container {
    font-size: 14px;
}
.row {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}
/* ----------- Icon style START ------------- */
.icon-common {
    display: inline-block;
    transition: all .3s;
}
.icon-down {
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top: 6px solid #000;
    border-bottom: none;
}
.icon-radio {
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
}
.icon-rotate {
    transform: rotate(-90deg);
}
/* ----------- Icon style END ------------- */
.title {
    margin-left: 10px;
}
.children {
    padding-left: 20px;
}
</style>

<template>
 <tree :tree-data="treeData" />
</template>

<script>
import Tree from './components/tree.vue';

export default {
 components:
  Tree,
 },
 data() {
  return {
   treeData: [
    {
     title: 'Level 1 List 1',
     children: [
      {
       title: 'Secondary List 1',
                            children: [
                                {
                                    title: 'Level 3 List 1',
                                }
                            ]
      },
      {
       title: 'Secondary List 2',
      }
     ]
    },
    {
     title: 'Level 1 List 2',
     children: [
      {
       title: 'Secondary List 1',
      },
      {
       title: 'Secondary List 2',
      }
     ]
    },
    {
     title: 'Level 1 List 3',
     children: [
      {
       title: 'Level 3 List 1',
      },
      {
       title: 'Level 3 List 2',
      },
      {
       title: 'Level 3 List 3',
      }
     ]
    }
   ]
  }
 }
}
</script>