How to write the code for moving selected elements in multiple <select> to another multiple <select>

Hi,
i have this code for two multiple <select> elements with movement buttons

<select multiple size="10" class="form-control col-md-5" style="display:inline; width:38%; margin-
      right:2%;">
      @foreach($citernes as $citerne)
        <option value="{{$citerne->numero_de_serie}}">{{$citerne->numero_de_serie}} || {{$citerne-
        >fabricant}} || {{$citerne->fournisseure}} || {{$citerne->prix_achat}} || {{$citerne->capacité}}</option>
      @endforeach

    </select>

    <div class="btn-group-vertical col-md-2" style=" margin-bottom:20%">
        <button type="button" class="btn btn-success btn-space">></button>
        <button type="button" class="btn btn-danger btn-space"><</button>
        <button type="button" class="btn btn-success btn-space">>></button>
        <button type="button" class="btn btn-danger btn-space"><<</button>
      </div>

    <select multiple size="10" class="form-control col-md-5" style="float:right; width:38%;">

    </select>

here is a photo :

https://ibb.co/12n43LK

i want to write a code with vueJS to make the buttons move the multiple selected <option> on the left to be moved to the write and vice versa .