Динамические данные аккордеона в Vuejs

Question

Я создаю небольшое приложение в Vuejs, где у меня есть аккордеон, который получает данные о событиях каждого клика.Весь мой код состоит в следующем:

https://codeshare.io/2BjJby

В этом у меня есть функция, которая вызывается нажатием на каждую гармошку данных.Я могу получить дерево первого уровня соответствующим образом, что-то вроде этого:

Итак, здесь вы можете видеть, что у меня есть родитель Consultant, тогда у нас есть ребенокэлемент Design Architect тогда снова у нас есть дочерний элемент Consultant этот набор значений неверен, так как ответ, полученный от API, имеет 4 набора данных, и он отображает только один набор данных.Для отладки этого я сделал console.log(this.withRoles[name]) и в консоли я получаю 4 значения:

Как вы можете видеть выше console.log(this.specialisations[name]) и второеэто console.log(this.withRoles[name]), я не знаю, где я пропускаю, поэтому я поместил весь код в ссылку выше, элементы приходят из этого кода:

<div class="panel my-panel-warning" v-if="child3.id === child2.parent_id" v-for="child3 in withRoles[child2.name]">
    <div class="panel-heading">
        <a v-if="child3.parent_id==null" style="color: #ff4d0e; font-weight: bold" data-toggle="collapse" :data-parent="'#child2'+child3.id" :id="'child3'+child3.id" :href="'#with_role'+child3.id" @click="getWithSpecialisation(child3.id, child2.id, child3.name)">{{"With "+child3.name+" (0)"}}</a>
        <a v-else style="color: #0c2a52; font-weight: bold" data-toggle="collapse" :data-parent="'#child2'+child3.id" :id="'child3'+child3.id" :href="'#with_role'+child3.id" @click="getWithSpecialisation(child3.id, child2.id, child3.name)">{{"With "+child3.name+" (0)"}}</a>
    </div>
    <div class="my-panel-body">
        <div :id="'with_role'+child3.id" class="panel-collapse collapse">
            <div class="my-panel-body">
                <div class="panel my-panel-warning" v-for="child4 in withSpecialisations[child3.name]">
                    <div class="panel-heading">
                        <a v-if="child4.parent_id==null" style="color: #ff4d0e; font-weight: bold" data-toggle="collapse" :data-parent="'#child3'+child4.id" :id="'child4'+child4.id" :href="'#with_spec'+child4.id" @click="table(child4.id, child2.id, child4.name)">{{"With "+child4.name+" (0)"}}</a>
                        <a v-else style="color: #0c2a52; font-weight: bold" data-toggle="collapse" :data-parent="'#child3'+child4.id" :id="'child4'+child4.id" :href="'#with_spec'+child4.id" @click="table(child4.id, child2.id, child4.name)">{{"With "+child4.name+" (0)"}}</a>
                    </div>
                    <div class="my-panel-body">
                        .
                        .
                        .
                        .
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

И функция, которая выбирает данные:

getWithRoles(id, name) {
    axios.get('Conxn/api/industry-relationship/sub-roles?company_id='+this.company_id+'&role_id='+id, {headers: getHeader()}).then(response => {
        if(response.status === 200)
        {
            Vue.set(this.withRoles, name, response.data.with_roles)
            console.log(this.withRoles[name])
        }
    })
},

, и мой код прекрасно работает для следующего дерева, т.е.:

Я использую ту же концепцию, и яЯ не уверен, где я делаю ошибку, помогите мне с этим.

Спасибо