Форма на vue.js разбитая на табы

Задача такая, у меня есть форма написанная в компоненте vue.js, при выборе разных типов в селект поле, у меня должны открываться разные табы для дальнейшего редактирования и это сделано как-то так:

<a class="nav-item nav-link" v-on:click="activeTab=1"
v-bind:class="[ activeTab === 1 ? 'active' : '' ]">Данные контрагента</a>

<a class="nav-item nav-link"
v-if="customer_type === 'outsource' && customer_person == 'individual'"
v-on:click="activeTab=2" v-bind:class="[ activeTab === 2 ? 'active' : '' ]">
Личные данные</a>
                            
<a class="nav-item nav-link"
v-if="customer_type === 'outsource' && customer_person == 'individual'"
v-on:click="activeTab=3" v-bind:class="[ activeTab === 3 ? 'active' : '' ]">Компания</a>
                            

И потом прямо в форму вставляю таб

<div v-if="activeTab === 1" class="tab-pane active user-files-table-wrapper" id="tab-fields-1">

Как то так, 1, 2, 3 и т.д. в зависимости от того, какой пользователь.

НО! При отправке формы отправляется только выбранный таб, данных из других табов в реквесте нет. Подскажите, как то можно сделать так, чтобы вот такая система с табами(для разных типов пользователя они будут разные) осталась и со всех выбранных табов отправлялась инфа? Вся соль, что нужно именно подгружать части формы в зависимости от того, какой выбран пользователь и табы и поля формы на этих табах будут разные, причем нужно сделать это асинхронно без перезагрузки страницы...