Open() method in ion-select using vue 3

Ionic Framework Ionic Vue
1

i’m looking for a way to open ion-select onclick button. any help please
here’s what i tried so far

 
> <ion-icon :icon="addCircle" class="addcircle_icon"  @click="toggleSelect = !toggleSelect" />
> 
>              <ion-select multiple="true" cancel-text="Annuler" ok-text="Confirmer"  v-if="toggleSelect"  v-model="selectedIndex">
> 
>               <ion-select-option value="bacon">Bacon</ion-select-option>
> 
>               <ion-select-option value="black olives">Black Olives</ion-select-option>
> 
>               <ion-select-option value="Extra cheese">Extra Cheese</ion-select-option>
> 
>               <ion-select-option value="Green peppers">Green Peppers</ion-select-option>
> 
>               <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
> 
>               <ion-select-option value="onions">Onions</ion-select-option>
> 
>               <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
> 
>               <ion-select-option value="pineapple">Pineapple</ion-select-option>
> 
>               <ion-select-option value="sausage">Sausage</ion-select-option>
> 
>               <ion-select-option value="Spinach">Spinach</ion-select-option>
> 
>             </ion-select>
> 
> 
> 
> <script lang="ts">
> 
>     import { useRouter } from "vue-router";
> 
>     import {
> 
>     IonLabel,
> 
>     IonItem,
> 
>     IonContent,
> 
>     IonSelect,
> 
>     IonInput,
> 
>     IonCard,
> 
>     IonCardContent,
> 
>     IonSelectOption,
> 
>     IonPage,
> 
>     IonCol
> 
> } from "@ionic/vue";
> 
>     import { defineComponent, ref} from "vue";
> 
>     import { peopleOutline, handLeft, restaurant, film, book, female, male, chevronBack, flag, shareSocial,
> 
>      heartOutline, heart, filter, build, close, add, calendar, language, addCircle} from 'ionicons/icons';
> 
>     export default defineComponent({
> 
>     name: "UsersSearchFilterPage",
> 
>     components: {
> 
>         IonCard,
> 
>         IonCardContent,
> 
>         IonLabel,
> 
>         IonItem,
> 
>         IonContent,
> 
>         IonPage,
> 
>         IonCol,
> 
>         IonSelect,
> 
>         IonInput,
> 
>         IonSelectOption,
> 
>     },
> 
>         setup() {
> 
> 
>         const router = useRouter();
> 
>         const selectedIndex = ref("");
> 
>         const toggleSelect = ref(false);
> 
>         return {handLeft, peopleOutline, router, restaurant, film, book, female, male, chevronBack, flag, shareSocial, heartOutline, calendar,
> 
>         add, build, heart, filter, close, language, addCircle, selectedIndex, toggleSelect};
> 
>     }
> 
> });
> 
> </script>
2

i have this example in angular with open () method

import { IonSelect } from '@ionic/angular';

@ViewChild('mySelect', { static: false }) selectRef: IonSelect;

openSelect() {
  this.selectRef.open()
}

home.html

<ion-button (click)="openSelect()">open</ion-button>
<ion-select multiple=" true" #mySelect>
  <ion-select-option> today </ion-select-option>
  <ion-select-option>tommorow</ion-select-option>
  <ion-select-option>weekend</ion-select-option>
</ion-select>

is there any example in vue 3 ?
3

any answers please ?