How to remove focus from Vuetify v-select?

I'm facing a problem with the <v-select> component from Vuetify. I have a v-dialog, which opens up when I click a button. That works fine.

In that v-dialog, there are 3 v-select, each in its v-col. The problem is that when the v-dialog opens, it puts the focus automatically on the first v-select, which is very annoying.

I've tried numerous solutions, and even managed to trigger the blur event (I had put a console log in the blur event). But even after the blur event is triggered, the focus stays on that v-select. As per this screenshot. This is the code of the v-select :

<v-select
        ref="selectCommune"
        v-model="commune"
        :items="communes"
        color="info"
        item-color="info"
        label="Commune"
        multiple
        hide-details
        outlined>
    <template v-slot:selection="{ item, index }">
        <v-chip v-if="index === 0">
            <span>{{ item }}</span>
        </v-chip>
        <span
                v-if="index === 1"
        >(+{{ commune.length - 1 }})</span>
    </template>
</v-select>

I tried to blur() the ref like that but didnt work :

this.$nextTick(() => {
         this.$refs.selectCommune.blur()
       })

Then I also tried this which fires the blur event, but still the focus stays on the v-select

this.$nextTick(() => {
    setTimeout(() => {
       this.$refs.selectCommune.$el.querySelector(".v-select__selections").firstElementChild.blur()
     })
})

I selected v-select__selections first child because I checked the event target from the blur event which is fired on the v-select.

Please help with this matter. I've only seen this happening inside v-dialog.