как можно выделить состояние в рекурсивном компоненте VUE

Question

У меня есть дилемма, что я использую компонент рекурсивно, это дерево, которое ваши дети загружают после вызова Ajax, но когда я пытаюсь открыть дочерний элемент, они все открываются, а когда они открывают один, он заменяет всех.

Я видел этот Циркулярный справочник VUE, но я не знаю, как его применить, я столько часов был с этим, что застрял.

Я пытаюсь сделатьдерево, которое загружает своих детей через AJAX.

Я вижу, что ошибка будет в переменных

• this.child_component
• this.show_childs

что они поддерживают предыдущее состояние и одинаково влияют на всех,

Как можно изолировать это состояние, чтобы каждый ребенок был независимым?

treeMap picture

export default {
    name: 'bList',
    components : {
        itett,
    },
    props : ['id', 'entity', 'treeData'],
    data  : ()=>{return{
        loading: true,
        tree: Object,
        child_component: false,
        tdata: Object,
        show_childs: false,
    }},
    methods: {
        clop: function(state, uid, ev){
            if( state === 'open' ) {
                this.show_childs = true;
            } else {
                this.show_childs = false;
                this.getChildren(uid);
            }
            // let _childs = document.querySelector(`[data-idml="${uid}"]`);
            // if( _childs ) {
            //     switch (state) {
            //         case 'close': _childs.classList.add('hide'); break;
            //         case 'open' : _childs.classList.remove('hide'); this.getChildren(uid); break;
            //     }
            // }
        },
        getChildren: function( uid ){
            this.child_component = false;
            let _tdata = {};
            let de   = uid.split('_');
            let _elm = Entity.create({ is: de[0], id: de[1] });
            let tot  = _elm.vf.childs.length - 1, cnt = 0;

            _elm.vf.childs.forEach((et, ix) => {
                if( _elm.vf.singular_base && _elm.id ) {
                    Entity.getList({
                        entity: et,
                        parents: +_elm.id,
                        parentType: _elm.nameType,
                        cascade: false,
                    }).then(res => {
                        if( Array.isArray(res) ) { _tdata[et] = res; }
                        if( cnt >= tot ) {
                            this.child_component = 'bList';
                            this.tdata = _tdata;
                        }
                        cnt++;
                    }).catch( err => { console.error( err ); });
                }
            });
        },

        seeMore: function(uid){ }

    },
    beforeMount: function(){
        this.tree = {};
        if( this.entity ) {
            Entity.get({ is:this.entity, id:this.id })
            .then(res => {
                this.tree[this.entity] = res;
                this.loading = false;
            }).catch( err => { console.error( err ); });
        } else if( this.treeData ) {
            this.tree = this.treeData;
            this.loading = false;
        }
    }

}

<template>
    <div class="ch_list">
        <template v-if="loading"> loading.... </template>
        <template v-else>
        <ul class="lsitm" v-for="(value, name, ig) in tree" :key="ig*Date.now()">
            <li v-for="(elm) in value" :key="elm.uid">
                <itett class="ls_line" :data="elm" @clop="clop"></itett>
                <div v-if="show_childs" class="ls_childs" :data-idml="elm.uid">
                    <div class="ch_header"></div>
                    <!-- <div class="ch_list"></div> -->
                    <component v-bind:is="child_component" :treeData="tdata"></component>
                    <!-- <keep-alive> </keep-alive> -->
                    <div class="ch_more"> <button @click="seeMore(`${entity}_${id}`, $event)">see more</button> </div>
                </div>
            </li>
        </ul>
        </template>
     </div>
</template>