I have this select, in which I am placing three data in each select item.
<div class="col-4">
<div class="form-group row no-gutters mb-1">
<label class="col-sm-7 col-form-label col-form-label-sm pr-1 text-right">Distrito</label>
<div class="col-5">
<select class="form-control form-control-sm" v-model="organizacion[0].c_ubig">
<option v-bind:value="ubigeo.c_ubig" v-for="ubigeo in ubig">
<tr>
<td>{{ ubigeo.l_ubig }}</td>
<td>{{ ubigeo.l_prov }}</td>
<td>{{ ubigeo.l_depa }}</td>
</tr>
</option>
</select>
</div>
</div>
</div>
which gives me the following result
As you can see, the data is disordered and what I want is to order it, as if it were a table,
as shown in the following image
You can do this with the 'sort' function, in the part of your code where you are assigning the value to your 'ubig' variable you can do this:
This will sort your array alphabetically using the 'l_ubig' field of each object.