Expected behavior

Init a MDBSelect component and load options by APi query.

Actual behavior

Dynamically update options list not working.

Resources (screenshots, code snippets etc.)

<template>
   <MDBSelect v-model:options="optionsRegions" v-model:selected="selectedRegions" multiple label="Région(s)" selectAllLabel="Tous" optionsSelectedLabel="régions selectionnées" />
</template>
<script>
  import { ref, reactive } from "vue";
  import axios from 'axios';
  import { , MDBSelect } from "mdb-vue-ui-kit";

  export default {
    components: {
      MDBSelect,
    },
    setup() {
      const selectedRegions = ref([]);
      const optionsRegions = reactive([]);
    };

    const loadRegions = () => {
    var options = {
          method: 'GET',
          url: process.env.VUE_APP_BACKEND_URL + '/api/regions',
          params: {},
          headers: {
              "content-type": "application/json",
              "Accept": "application/json"
          }
        };
        axios.request(options).then((response) => {
          //this.regionsData = response
          response.data.forEach(region => {
            optionsRegions.push({ text: region.libelle, value: region.id });
          });
          console.log( optionsRegions );
        })
      };

      return {
        optionsRegions,
        selectedRegions,
        loadRegions,
      };
    },
    mounted() {
      this.loadRegions()
    }
  };
</script>