Select2 loaded in a remote modal does not load

I have modal loading a remote link where inside it has a select2, however the select2 does not appear.

I use Laravel so my template makes use of blades, I will illustrate how I set up the code:

js for open modal ajax

$(document).ready(function(){
  $('.ls-modal').on('click', function(e){
  e.preventDefault();
  $('#defaultModal').find('.modal-body').load($(this).attr('href'));
  });
});

Here instead the select that should be replaced by a select2, this blade is loaded AFTER the modal is opened.

This would be in changegame.blade.php:

{{ Form::select('games', array('' => 'Select Game') + $games, $user_dati->id_game ?? '',  array('class' => 'sele_game','data-placeholder'=> 'Select Game')) }}

In the main layout of the template I put after js callback to select2 and jquery:

<script type="text/javascript">
$(document).ready(function(){
    $('.sele_game').select2({
    placeholder: 'Select Game',
    ajax: {
      url: 'https://***.it/ajax/load_game',
      dataType: 'json',
      delay: 250,
      processResults: function (data) {
        return {
          results:  $.map(data, function (item) {
                return {
                    text: item.nome,
                    id: item.id
                }
            })
        };
      },
      cache: true
    }
  });
});
</script>

This javascript with the Select2 callback I put in after calling Select2 (v. 4.0.13) via CDN

The chrome console does not report any javascript errors to me.
Where is my mistake?
If I put the jquery, js and select2 inside changegame.blade.php, it loads the select2 correctly (however it is a raw page), if I open changegame.blade.php via button in modal, it loads the css etc but not the select2.