клон формы включают в себя зависимые поля по vuejs

Question

У меня есть форма, в которой должна быть представлена ​​цена на различные медицинские услуги. Обработки уже категоризированы. Теперь я хочу сначала выбрать группу лечения из селектора, а затем выбрать список лечения для этой категории в следующем селекторе. Когда у меня есть только одна форма на странице, у меня нет проблем. Но мне нужно клонировать эту форму, и пользователь может одновременно записать стоимость некоторых процедур. В этом случае все вторые селекторы устанавливаются в соответствии с последним селектором для категорий. При этом, чтобы соответствовать селектору своей категории. Я очень хорошо искал решение и не получил его. Мой код в vuejs выглядит следующим образом. Пожалуйста, ведите меня. Заранее спасибо.

<template>
    <div>
        <div id="treatment_information">
           <div class="col-md-3">
                        <select id="category_name" class="form-control show-tick"
                                v-on:change="getTreatmentList($event)"
                                name="treatment_rates[]category_id" v-model="treatment_rate.category_id"
                        >
                            <option value="0"> -- select category --</option>
                            <option class="form-control main"
                                    v-for="item in vue_categories" :id="item.id+1000" :value="item.id"
                                    :name="item.name">
                                {{ item.name }}
                            </option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <select id="treatment_id" class="form-control show-tick"
                                name="treatment_rates[]treatment_id" v-model="treatment_rate.treatment_id"
                        >
                            <option value="0"> -- select treatment --</option>
                            <option class="form-control main"
                                    v-for="item in vue_treatments" :value="item.id">
                                {{ item.value }}
                            </option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                vue_temp: [],
                vue_categories: [],
                vue_treatments: [],
                vue_category: '',
                //for clone form
                treatment_rate: {
                    category_id: 0,
                    treatment_id: 0,
                    hospital_id: 0,
                    dollar: 'دلار',
                    rial: 'ریال'
                },
                treatment_rates: [],
            };
        },
        mounted() {
            console.log('Component mounted.');
            this.getList();
        },
        methods: {
            getList() {
                var self = this;
                axios.get('/vueDashboard/get/categories').then(function (response) {
                    self.vue_temp = response.data;
                    const len = self.vue_temp.length;
                    self.vue_temp.forEach(function (item) {
                        if (self.vue_right.length > 0) {
                            while (self.vue_right[self.vue_right.length - 1] < item['rgt']) {
                                self.vue_right.pop();
                                if (self.vue_right.length == 0)
                                    break;
                            }
                        }
                        self.vue_categories.push({
                            'id': item['id'],
                            'name': '---'.repeat(self.vue_right.length) + ' ' + item['name']
                        });
                        self.vue_right.push(item['rgt'])
                        var str = "---";
                    });
                }).catch(function (error) {
                    console.log(error);
                });

                axios.get('/vueDashboard/get/treatments?category=' + JSON.stringify(self.treatment_rates)).then(function (response) {
                    console.log(response.data);
                    self.vue_treatments = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            addForm(event) {
                var self = this;
                self.vue_increment_id[self.vue_counter++]=self.vue_counter;
                console.log(self.vue_increment_id);
                self.treatment_rates.push(Vue.util.extend({}, self.treatment_rate));
            },


        }
    }

</script>