Vue-Multiselect is empty - Laravel Spark

Question

I've been implementing the latest Vue-Multiselect and have it rendering in the page ok. For some reason the v-model value doesn't seem to be taking effect as it's staying empty.

import { Multiselect } from 'vue-multiselect'

var MultiSelect = Vue.extend({
components: { Multiselect },
template: '<div><multiselect :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" placeholder="Please select..." label="name" track-by="name"></multiselect></div>',
    data: function() {
        return {
            value: [],
            options: []
        };
    }
});

Vue.component('multi-select', MultiSelect);

I'm setting all the options as per an example:

options: [
                {
                    language: 'Javascript',
                    libs: [
                        { name: 'Vue.js', category: 'Front-end' },
                        { name: 'Adonis', category: 'Backend' }
                    ]
                },
                {
                    language: 'Ruby',
                    libs: [
                        { name: 'Rails', category: 'Backend' },
                        { name: 'Sinatra', category: 'Backend' }
                    ]
                },
                {
                    language: 'Other',
                    libs: [
                        { name: 'Laravel', category: 'Backend' },
                        { name: 'Phoenix', category: 'Backend' }
                    ]
                }
            ],

This is the code in the blade:

    <multi-select v-model="updateTutorInstrumentsForm.options" group-values="libs" group-label="language"></multi-select>

    <pre>@{{ updateTutorInstrumentsForm.options }}</pre>

A bit confused to say the least!

Answer 1

I managed to resolve this.

Thanks to Justin's comment about encapsulating the multi-select, I decided to break it out and did the following:

import { Multiselect } from 'vue-multiselect'

var CustomSelect = Vue.extend({
components: { Multiselect },
template: '<div><multiselect :multiple="true" :selected="selected" :options="options" group-values="instruments" group-label="name" track-by="name" label="name"></multiselect></div>',

created() {
    this.getInstruments();
},

data: function() {
    return {
        selected: null,
        options: []
    };
},

methods: {
    getInstruments() {
        this.$http.get('/get/instruments')
            .then(response => {
                this.instruments = response.data;
                this.updateInstruments();
            });
    },

    updateInstruments() {
        this.options = this.instruments;
    },
}
});

Vue.component('customselect', CustomSelect);

Then in the blade template, simply: <customselect></customselect>