vuex 棧溢出

<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>

為什么會出現(xiàn)棧溢出求解釋謝謝?。?！