title: how to load array of objects data with select2
body: <p>My Issue: </p>
  
  <p>I have created the complete scenario of my problem.</p>
  
  <p>My Html:</p>
  
  <pre><code>&lt;select data-placeholder = "Sending" id = "sender" data-allow-clear = true &gt;
     &lt;option &gt;&lt;/option &gt;
  &lt;/select &gt;    
  
  &lt;select data-placeholder = "Receiving" id = "receiving" data-allow-clear = true &gt;
    &lt;option &gt;&lt;/option &gt;
  &lt;/select &gt;
  </code></pre>
  
  <p><code>Corridor url</code> return this following collection (i am using laravel as backend): </p>
  
  <pre><code>[ {
      "id"                 : 1, "source_country_id": 1, "destination_country_id": 2,
      "source_country"     : { "id": 1, "name": "United Kingdom", "flag_icon": "flag-icon-gb" },
      "destination_country": { "id": 2, "name": "Pakistan", "flag_icon": "flag-icon-pk" }
  }, {
      "id"                 : 2, "source_country_id": 1, "destination_country_id": 3,
      "source_country"     : { "id": 1, "name": "United Kingdom", "flag_icon": "flag-icon-gb" },
      "destination_country": { "id": 3, "name": "India", "flag_icon": "flag-icon-in" }
  }, {
      "id"                 : 7, "source_country_id": 1, "destination_country_id": 4,
      "source_country"     : { "id": 1, "name": "United Kingdom", "flag_icon": "flag-icon-gb" },
      "destination_country": { "id": 4, "name": "Bangladesh", "flag_icon": "flag-icon-bd" }
  } ]
  </code></pre>
  
  <p>My Vue Code:  In <code>corridors</code> method using axios I was retrieving the data (shown above) and after that I am creating two arrays for <code>sendigCountries</code> and <code>recevingCountries</code>. Both arrays successfully filled with its data (<code>sendingCountries</code> created with duplicate data) after that I want to pass that data to select2 but select2 not filled with that arrays. please help me to figure out where I make mistake. </p>
  
  <pre><code>  var app = new Vue({
      methods: {
           corridors : function () {
                     axios.post ( '/corridors' )
                     .then ( response =&gt; {
                           let sendingCountries   = [];
                           let receivingCountries = [];
                           _.forEach ( response.data, function (value, key) {
                                   sendingCountries.push ( {
                                     id: value.source_country.id,
                                     text: value.source_country.name,
                                     flag: value.source_country.flag_icon
                                   });
  
                                   receivingCountries.push ( {
                                     id  : value.destination_country.id,
                                     text: value.destination_country.name,
                                     flag: value.destination_country.flag_icon
                                   });
                      } );
                     $ ( "#sender" ).select2 ( {
                                        width: '100%',
                                        data : sendingCountries,
                                    } );
                      $ ( "#receiver" ).select2 ( {
                                        width: '100%',
                                        data : receivingCountries,
                                    } );
                     } )
                     .catch ( error =&gt; { } )
              }
       }
  })
  </code></pre>