VueJS How to change focus in to next element from field using “Enter” key

Can someone help me I’m so stuck here finding solution in my problem. I have table report and in the first field autocomplete If I pressed Enter key the focus must go to the next element in “Startdate” dropdown v-select then press “Enter” again to go Cutoffdate and in View Report submit button that is the sequence. now I’m struggling because if i pressed enter key after in the autocomplete field the focus is jumping in Cutoffdate, the startDate element is not included in focus using enter key.
This is the fields enter image description here In this second picture this is the results after i click the enter key it must be in above first in stastDate. Ill send my vuejs code script

 <header-component 
        :titleWidth="270"
        class="vue-header"
    >
        <div slot="appendComponent">
            <v-card class="filter-card" width="270px">
                <autocomplete-clients
                    @update:clients-data="receiveClients"
                    :prependIcon="null"
                    :reset="reset2"

                    @keydown.enter.native="handleEnterKey"

                ></autocomplete-clients>
            </v-card>
        </div>
        <div slot="filters">
            <v-row>
                <v-col class="col-auto">
                    <v-card class="filter-card dft-width">
                        <v-select
                            dense
                            class="ma-0 pa-0"

                            ref="startDateSelect"
                            
                            :items="startDates"
                            v-model="startDate"
                            label="Startdate"
                            placeholder="Select Start Date"
                            hide-details
                        ></v-select>
                    </v-card>
                </v-col>
                <v-spacer></v-spacer>
            </v-row>

            <v-row>
                <v-col class="col-auto">
                    <v-card class="filter-card dft-width">
                        <datepicker-start-date
                            label="Cutoffdate"
                            :prependIcon="null"
                            :startDate="cutoffDate"
                            @input:date="receiveCutoffDate"
                            dateFormat="MM/DD/YYYY"
                        ></datepicker-start-date>
                    </v-card>
                </v-col>
                <v-col class="col-auto">
                    <v-btn
                        class="ma-0 pa-0 dft-width2"
                        color="primary"
                        @click="onViewReportClickHandler"
                        x-small
                    >
                        View Report
                    </v-btn>
                </v-col>
            </v-row>
        </div>
    </header-component>

For the method I’ve used handleEnterKey

 methods: {
      handleEnterKey() {
        this.$nextTick(() => {
            const selectInput = this.$refs.startDateSelect.$refs.input; // Vuetify v-select exposes $refs.input for the actual input element
            if (selectInput) {
                selectInput.focus();
            }
        });
    },

I’ve try using the this.$refs.startDateSelect.$refs.input but in I think the conflict is in the startDate refs “ref=”startDateSelect” is causing me problem that why startdate is not included in focus?