How to change focus into next element using Enterkey

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.

This is the results after I’ve pressed the enter key, the focus must be in above first in stastDate before going in Cutoffdate.

 <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?