Správná tvorba subkomponent v komponentě

Ahoj všem, mám otázka ohledně Vue.js. Mám vytvořenou komponentu (pracuji s vuetify frameworkem) a v ní mám jednotlivé řádky tabulky, kde jeden typický řádek je následující.

Jedná se o tag <select> na kterém je použita validace (pomocí vee-validate). A nyní mi jde o to, jestli je (možné) a správně vytvořit komponentu "select.vue" a tu zavolat v komponentě radio.vue a poslat si do ní parametry pro daný item. Nebo toto je správná, byť dlouhá cesta (myšleno dlouhý kód).

Děkuji za rady od zkušenějších.


// radio.vue

Kód:

 <tr>
    <th>TX Frequency [{{ $store.state.updateState.radioUnit }}]</th>
    <td
        v-if="[1, 3].includes($store.getters.getChannel)"
    >
        <ValidationProvider 
            name="TxF_Loc_Ch1" 
            :rules="`required|numeric|between: ${$store.state.cnf.rad.txf.minE[0] / 1000}, ${$store.state.cnf.rad.txf.maxE[0] / 1000}`" 
            v-slot="{ errors, pristine, validate }"
            class="position-relative"
        >
            <v-text-field 
                ref="TxfLocCh1"
                type="number"
                v-model="values.upTxfLocCh1"
                @click="catchOldValue('oldTxfLocCh1', pristine)"
                @input="$store.dispatch('dataChange', [ values.oldTxfLocCh1.toString(), $event, '13', 'TxfLocCh1', 'set rad1 txf', validate($event) ])"
            >
                <v-tooltip slot="append" attach left>
                    <template v-slot:activator="{ on }">
                        <v-icon v-on="on" color="primary" dark>
                        mdi-information-outline
                        </v-icon>
                    </template>
                    <span>TXF&nbsp;range:&nbsp;{{ $store.state.cnf.rad.txf.minE[0] / 1000}}&nbsp;..&nbsp;{{$store.state.cnf.rad.txf.maxE[0] / 1000 }} {{ $store.state.updateState.radioUnit }}</span>
                </v-tooltip>
            </v-text-field>
            <span 
                v-if="errors.length > 0" 
                class="block-error block-error__main"
            >{{ errors[0] }}</span>
        </ValidationProvider>
    </td>

    <td
        v-if="[2, 3].includes($store.getters.getChannel)"
    >
        <ValidationProvider 
            name="TxF_Loc_Ch1" 
            :rules="`required|numeric|between: ${$store.state.cnf.rad.txf.minE[4] / 1000}, ${$store.state.cnf.rad.txf.maxE[4] / 1000}`" 
            v-slot="{ errors, pristine, validate }"
            class="position-relative"
        >
            <v-text-field 
                ref="TxfLocCh2"
                type="number"
                v-model="values.upTxfLocCh2"
                @click="catchOldValue('oldTxfLocCh2', pristine)"
                @input="$store.dispatch('dataChange', [ values.oldTxfLocCh2.toString(), $event, '13', 'TxfLocCh2', 'set rad2 txf', validate($event)])"
            >
                <v-tooltip slot="append" attach left>
                    <template v-slot:activator="{ on }">
                        <v-icon v-on="on" color="primary" dark>
                        mdi-information-outline
                        </v-icon>
                    </template>
                    <span>TXF&nbsp;range:&nbsp;{{ $store.state.cnf.rad.txf.minE[4] / 1000}}&nbsp;..&nbsp;{{$store.state.cnf.rad.txf.maxE[4] / 1000 }} {{ $store.state.updateState.radioUnit }}</span>
                </v-tooltip>
            </v-text-field>
            <span 
                v-if="errors.length > 0" 
                class="block-error block-error__main"
            >{{ errors[0] }}</span>
        </ValidationProvider>
    </td>
    <td
        v-if="[1, 3].includes($store.getters.getChannel)"    
    >
        <ValidationProvider 
            name="TxF_Rem_Ch1" 
            :rules="`required|numeric|between: ${$store.state.cnf.rad.rxf.minE[0] / 1000}, ${$store.state.cnf.rad.rxf.maxE[0] / 1000}`" 
            v-slot="{ errors, pristine, validate }"
            class="position-relative"
        >
            <v-text-field 
                ref="TxfRemCh1"
                type="number"
                v-model="values.upTxfRemCh1"
                @click="catchOldValue('oldTxfRemCh1', pristine)"
                @input="$store.dispatch('dataChange', [ values.oldTxfRemCh1.toString(), $event, '13', 'TxfRemCh1', 'rem1 set rad1 txf', validate($event)]), formErrors"
            >
                <v-tooltip slot="append" attach left>
                    <template v-slot:activator="{ on }">
                        <v-icon v-on="on" color="primary" dark>
                        mdi-information-outline
                        </v-icon>
                    </template>
                    <span>TXF&nbsp;range:&nbsp;{{ $store.state.cnf.rad.rxf.minE[0] / 1000}}&nbsp;..&nbsp;{{$store.state.cnf.rad.rxf.maxE[0] / 1000 }} {{ $store.state.updateState.radioUnit }}</span>
                </v-tooltip>
            </v-text-field>
            <span 
                v-if="errors.length > 0" 
                class="block-error block-error__main"
            >{{ errors[0] }}</span>
        </ValidationProvider>
    </td>
    <td 
        v-if="[2, 3].includes($store.getters.getChannel)"    
    >
        <ValidationProvider 
            name="TxF_Rem_Ch2" 
            :rules="`required|numeric|between: ${$store.state.cnf.rad.rxf.minE[4] / 1000}, ${$store.state.cnf.rad.rxf.maxE[4] / 1000}`" 
            v-slot="{ errors, pristine, validate }"
            class="position-relative"
        >
            <v-text-field 
                ref="TxfRemCh2"
                type="number"
                v-model="values.upTxfRemCh2"
                @click="catchOldValue('oldTxfRemCh2', pristine)"
                @input="$store.dispatch('dataChange', [ values.oldTxfRemCh2.toString(), $event, '13', 'TxfRemCh2', 'rem1 set rad2 txf', validate($event)])"
            >
                <v-tooltip slot="append" attach left>
                    <template v-slot:activator="{ on }">
                        <v-icon v-on="on" color="primary" dark>
                        mdi-information-outline
                        </v-icon>
                    </template>
                    <span>TXF&nbsp;range:&nbsp;{{ $store.state.cnf.rad.rxf.minE[4] / 1000}}&nbsp;..&nbsp;{{$store.state.cnf.rad.rxf.maxE[4] / 1000 }} {{ $store.state.updateState.radioUnit }}</span>
                </v-tooltip>
            </v-text-field>
            <span 
                v-if="errors.length > 0" 
                class="block-error block-error__main"
            >{{ errors[0] }}</span>
        </ValidationProvider>
    </td>
</tr>