Relation dropdown with Laravel and VueJS

I would retrieve user channels and propose them in select box. I use Laravel 5.5 And Vue 2. Dropdown doesnt retrieve channels. I first sent the channels via JSON in my controller:

public function user_channels()
{
    $channels = Auth::user()->channel()->orderBy('name', 'asc')->get();

    return Response::json($channels, 200, [], JSON_NUMERIC_CHECK);
}

Next In my Vue Component:

    <template>
         <div class="panel-body">
                <div v-for="channel in userChannels"></div>
                <select v-model="userChannels" class="form-control">
                    <option v-for="channel in userChannels" :value="channel.id"></option>
                </select>
        </div>
    </template>
<script>
export default {
        data() {
            return {
                userChannels: []
            }
        },
        methods: {
            getChannels () {
              this.$http.get('/user_channels').then((response) => {
                this.userChannels = response.data;
              });
            }
        },
        mounted () {
            this.getChannels();
        }
    }
</script>

Select Box is empty but when I use this code in the template before select box, the channel list appears but when I select, the list disappear After Select:

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2A86KWL
via IFTTT