Select2 changes the value

Question

I have a select field that displays products and then they can be saved. Because I wanted to have a search option, I also use select2.

I edit all the code in a .twig file and included jquery and select2 as follows:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>                        
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
</script>

I use Vue to display the products and determine the value.

<select v-model="productEdit.productId" name="productEdit.productId" class="js-example-basic-multiple form-select" style="width: 100%" required>
    <option v-for="product in productsAvailable" :value="product.id">[[ product.groupName]] - [[ product.price.currency() ]]</option>
</select>

I can't use the submit button because I don't pass a value anymore. Before that I didn't use Select2 and the code worked fine.

What is the reason for losing the value and how can I change it?