Сделать подсписок списка 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 не обновляется, а дублируется как на второй картинке.


Ответы (0 шт):