Сделать подсписок списка vue.js
Помогите правильно сделать список.
У меня сейчас выходит список так:
(неправильный список)
У меня есть два списка. Первый под названием gu_list[id, name], второй список ex_list[id, name, id_gu]. Два списка соединяет id_gu.
На данный момент у меня список:
<b-list-group>
<b-list-group-item v-for="(gu, index) in gu_list" v-bind:key="gu.id+'gu_11'" >
<b-row align-h="between">
<b-col v-b-toggle="gu.id + 'collapse-gu'">
<span class="mr-auto">
<b-icon-chevron-down class="mr-2"/>
<b> {{index+1}}) {{ gu.name }} </b>
</span>
</b-col >
<b-col cols=3>
<ExportGuButton :gu_id = "gu.id" :gu_name = "gu.name"/>
</b-col>
</b-row>
<div>
<b-collapse :id="gu.id + 'collapse-gu'" class="mt-2">
<b-list-group-item v-for="(ex, index) in ex_list" v-bind:key="ex.id+'ex_141'">
<b-row align-h="between">
<b-col>
<span class="mr-auto">
{{index+1}}) {{ ex.name }}
</span>
</b-col>
<b-col cols=4>
<ExportButton :ex_id = "ex.id" :ex_name = "ex.name" :ex_list="ex_list"/>
</b-col>
</b-row>
</b-list-group-item>
</b-collapse>
</div>
</b-list-group-item>
</b-list-group>
Я пробовала их объединить в computed и там изменив их сделать новый список gu_1_list[id, name, ex[]]. Но каждый раз когда один из списков подвергается изменению gu_1_list не обновляется, а дублируется как на второй картинке.