I have a problem with my v-for. I call the API and retrieve the data, but the v-for is not updated.

This is my html:

<input list="listenomspartenaires" id="inputlistenomspartenaires" type="text" name="nominputlistenomspartenaires">
        <datalist id="listenomspartenaires">
           <option v-for="partenaire in listedespartenaires" :value="partenaire.nom" :key="partenaire.idpartenaire" :data-idpartenaire="partenaire.idpartenaire" />  <!--  -->
</datalist>

and my JS:

<script lang="js">
    import { defineComponent } from 'vue';

    export default defineComponent({
        data() {
            return {
                listedespartenaires : []
            };
        },
        methods:{            
            SetNoms(lesnoms){
                this.listedespartenaires = lesnoms;
                alert(lesnoms);
            }
        },
        mounted() {
            fetch("https://localhost:7264/api/partenaires/GetNoms")
                .then((response) => response.text())
                .then((data) => this.SetNoms(data));
        }
    });
</script>

The alert shows the data so they can be retrieved fine, but my input is invalid.

I also tried assigning "listedespartenaires" directly from the get without passing it through the method, but the result was the same.

I also tried this.$forceUpdate(); after assigning "listedespartenaires". But no success.

Can anyone help me?

Thanks,

Phillip