Passing data from Vue.js request to Laravel 5.3 form - laravel-5

Question

I have two tables: Countries and Cities. Idea is to show the second dropdown when User has selected country and fill it with cities that correspond to selected country.
Unfortunately I cannot figure out how to pass retrieved values to form.
Values retrieved are below the country with id 21 is Norway :)
Selected { "country": "21", "CountrySelected": true, "cities": { "6": "Oslo", "11": "Lillehammer" } }
// My app.js
const app = new Vue({
el: '#events',
data: {
country:'',
CountrySelected: false,
cities:[],
},
methods: {
WhenCountryHasBeenSelected: function(event) {
this.getCities();
this.CountrySelected= true;
},
getCities: function(){
this.$http.get('api/cities/'+this.country).then(function (response) {
this.cities = response.data;
});
}
},
})
//My api.php routes
Route::get('/cities/{country_id}', function (Request $request, $country_id) {
$cities=App\City::where('country_id', $country_id)->get()->pluck('name','id');
return $cities;
});
//My blade file
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div id="events">
<div class="panel panel-default">
<div class="panel-heading">Select cities by country</div>
<div class="panel-body">
{!! Form::open() !!}
{!! Form::select('country', $countries, null, ['v-model'=>'country', '#change'=>'WhenCountryHasBeenSelected' ,'class'=>'form-control']) !!}
<div v-show="CountrySelected">
{!! Form::select('city',$cities, null, ['class'=>'form-control']) !!}
{!! Form::close() !!}
Selected #{{ $data | json }}
</div>
</div>
</div>
</div>
</div>
</div>
#endsection

Answer 1

Ended up to use Laravel collection map feature. Mu route looks now like this
Route::get('/cities/{country_id}', function (Request $request, $country_id) {
$collection=App\City::where('country_id', $country_id)->get();
$cities=$collection->map(function($city){
return ['id' => $city->id, 'name' => $city->name];
})->toArray();
Long live Laracast forums and bashy :)