<template>
<div class= "menubody">
<ul class= "menulist">
<li class= "menuitem" v-for= "(item, index) of list">
<router-link :to="{ path: item.route, query: { id: item.id} }" :style="{paddingLeft: padding+"rem"}" :class="[(nowindex===index)? "active": ""]">
{{item.name}}
<img src= "../assets/spread.png" v-if= "item.isparent" @click= "showitem(index, item.id)"/>
<span class= "addsymbol" v-if= "item.name=="""></span>
</router-link>
<div class= "children" v-show= "nowindex===index">
<tree-menu :list= "children" :padding= "newpadding"></tree-menu>
</div>
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "TreeMenu",
props: {
list: {
type: Array,
default: function () {
return []
}
},
padding: {
type:Number,
default: 0.42
}
},
computed: {
newpadding() {
return this.padding+0.1;
},
children() {
console.log(1)
return this.$store.state.tree
}
},
data() {
return {
nowindex: null,
}
},
methods: {
showitem(index, id) {
this.nowindex= this.nowindex===index? "": index;
axios.get(`/api/${id}.json`).then(res=> {
this.$store.commit("setTree", res.data.children)
})
},
getInfo(index) {
},
},
}
</script> 
Thank you for explaining why stack overflow occurs!