Is it possible to get the component data from the outside at the right time?

Question

Vue.js

I have a dozen components in the form of tabs. Each tab contains from 5 to 10 selects, inputs, etc. essentially variables.
The "confirm" button is outside and it is when you click it that the data of the current component should be processed.
Bringing more than 50 new variables into the repository with all getters / setters does not raise a hand. I read in the docs that you can use v-model on components, but it's still 10 variables. And the data from the components is needed 1 time, and after switching the tab, it also needs to be cleared.
I came up with two ways, but maybe it's easier?
1. Make the currentActiveModule in the storage and write an array with the data of the active module into it each time the data in it changes. And that means when you press the button, we just take it from there and work.
2. Make not one "confirm" button, but in each module its own, identical. But here serious problems with layout and with the possibility of expansion begin.

Answer 1

Parent Then when we perform some action in the parent, we can refer to the child
<v-component ref="component" />

sendForm() {
const chlidData = this.$refs.component.$data 
}

We take the necessary data, I didn’t use it myself, but it seems that I saw something similar in vuetify

Answer 2

Why do you have a separate component for each tab? They are so different and it is impossible to generalize them to one?
But even in this case, you should have one component for all tabs, which will include different content as a child component by name:

<div class="tab">
        <component
                v-bind:is="activeTabComponent"
                v-model="values"
            ></component>
    </div>

and pass to this child component in the model, the object where the child component will emit its data.
And in this tab component place your button.

Answer 3

Why do you have a separate component for each tab? They are so different and it is impossible to generalize them to one?

Yes. Fundamentally different, according to the type of "headdress", "gadget" "fishing rod". Somewhere a set of checkboxes, somewhere selects and textarea, and so on.

And in this tab component place your button.

It is there, because in fact, there are still components two levels above.
component1
... component2
..... here we are, the button
.........component3.1> component3.2>
..
I didn't fully understand how, unfortunately.
We make values ​​in component2 and pass it through props in component3.x and change it there every time it changes, right?