How to organize code in Vue?

Question

Vue.js

I am new to vue. there is such a task:
at the input: "calculation type" which is selected from the list. (It's clear how to do it). types - 7 pcs.

the logic that needs to be done: the "calculation type" that the user selects is passed to the input. there are two lists of controllers "type 1" - 20 pcs. and "type 2" - 15 pcs. depending on the selected "calculation type" it is necessary to display a certain set of controls "type-1" and "type 2". Controls "intersect" at some values ​​of the initial parameter.
output: Dom-rendered controls of two types filtered by "calculation type".

those. I understand that there are two options:
- for each choice of the initial parameter - generate your own set of controls. (does not look optimal because
- initialize all controls, and then enable them using vue , calculating the visibility properties depending on the initial parameter. (this option looks more reasonable than the first one).

Am I correct in thinking that option two should be used? how to organize it in code (minimal example)?
thank.

Answer 1

<control-one v-if='condition1' />
<control-two v-if='condition2' />
<control-three v-if='condition1 || condition2' />

Something like this