title: vue-multiselect two controls one source with no item overlapping
body: <p>Hi vue and js experts!</p>
  
  <p>I have a list of values ["A", "B", "C", "D"]</p>
  
  <p>a user needs to pick values into two lists "List1" and "List2". Values in the lists should not overlap. Let say user picks "A" for "List1", the option "A" should become unavailable for picking in "List2"</p>
  
  <p>Currently I am using two instances of Vue-Mulitselect component which share same list of options. It works fine but values in "List1" and "List2" can overlap (e.g. user can pick 'A' in both lists). </p>
  
  <p>Please advise how bind two multiselect to share same options list with no overlapping?</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;multiselect v-model="List1" :options="options"&gt;&lt;/multiselect&gt;
      &lt;multiselect v-model="List2" :options="options"&gt;&lt;/multiselect&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Multiselect from 'vue-multiselect'
  
    export default {
      components: { Multiselect },
      data () {
        return {
          List1: null,
          List2: null, 
          options: ['A', 'B', 'C', 'D']
        }
      }
    }
  &lt;/script&gt;
  </code></pre>