Vue-MultiSelect Checkbox binding

The data properties of the multi-select component does not update on change. Check-boxes doesn't update on the front-end.

Expected Behavior : The check-boxes should get ticked, when clicked.

Can someone help me ?

Link to code : https://jsfiddle.net/bzqd19nt/3/

  <multiselect 
    select-Label=""
    selected-Label=""
    deselect-Label=""
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    :close-on-select="false"
    @select=onSelect($event)
    @remove=onRemove($event)
    >
    <span class="checkbox-label" slot="option" slot-scope="scope" @click.self="select(scope.option)">
    
      <input class="test" type="checkbox" v-model="scope.option.checked" @focus.prevent/>

    </span>
  </multiselect>
  <pre></pre>
</div>

    components: {
    Multiselect: window.VueMultiselect.default
    },
    data: {
    value: [],
    options: [
        {   language: 'JavaScript', library: 'Vue.js', checked: false },
      { language: 'JavaScript', library: 'Vue-Multiselect', checked: false },
      { language: 'JavaScript', library: 'Vuelidate', checked: false }
    ]
    },
  methods: {
    customLabel (option) {
      return `${option.library} - ${option.language}`
    },
    onSelect (option) {
        console.log("Added");
      option.checked = true;
      console.log(option.library + "  Clicked!! " + option.checked);
    },

    onRemove (option) {
        console.log("Removed");
      option.checked = false;
      console.log(option.library + "  Removed!! " + option.checked);
    }
  }
}).$mount('#app')