multimple select2 with laravel vue js not working - laravel

Question

i want to make dynamic form .so for that i tried foreach loop .everything going fine without select options. For making classname or id name unique i want place a index value but cant not place index value.take a look below:
<div class="form-group m-form__group row " v-for="(pack,index) in packs">
<div class="col-lg-3">
<label>SKU: #{{ index }}</label>
<input v-model="pack.sku" type="text" name="name" class="form-control m-input" placeholder="SKU">
</div>
<div class="col-lg-3">
<label>Unit:</label>
<select class="form-control select2 #{{ index }}" name="unit" v-model="pack.unit" >
<option value="0">KG</option>
<option value="1">ML</option>
<option value="2">Liter</option>
</select>
</div>
<div class="col-lg-3">
<label>Size:</label>
<input v-model="pack.size" type="number" name="name" class="form-control m-input" placeholder="Size">
</div>
<div class="col-lg-3">
<label>Barcode:</label>
<input v-model="pack.barcode" type="number" name="barcode" class="form-control m-input" placeholder="Barcode">
</div>
</div>

Answer 1

you need to reload select2.
html markup:
<select class="form-control select2 #{{ index }}" name="unit" v-model="pack.unit" id="unit">
<option value="0">KG</option>
<option value="1">ML</option>
<option value="2">Liter</option>
</select>
Vuejs code:
...
components: {
},
mounted() {
setTimeOut(() => {
let unit = $('#unit'); // or document.querySelector('#unit');
unit.select2();
}, 100);
},