Is it possible to change Vue Multiselect selected value from outside the component?

Question

I use vue.js (v2.6.14) and vue-multiselect (v2.1.6) in my app.

I have a problem with changing data inside multiselect component by clicking on sibling element input[type='checkbox'].

components: {
  Multiselect
},
data() {
 residence: {
  name: 'Not selected'
 },
 residenceOptions: [
  { name: 'Not selected' },
  { name: 'Albania' },
  { name: 'Algeria' },
  ...
  { name: 'United Arab Emirates'}
 ]
}

<multiselect
 v-model='residence'
 :options='residenceOptions'
 label='name'
 placeholder='Residence'
 track-by='name'>
    <template slot='singleLabel' slot-scope='{ option }'>
       <strong>{{ option.name }}</strong>
    </template>
</multiselect>

<div class='form__checkbox'>
 <input
  id='quotationForm-resident'
  class='form__input'
  name='residence'
  type='checkbox'
  placeholder=''
  :checked='residence && residence.name === "United Arab Emirates"'
  @click='residence.name = "United Arab Emirates"'
/>

What I expected from this code: by clicking on the checkbox, the selected value (data.pointer inside multiselect component) would be different (one for an element with the name "United Arab Emirates").

What I got: instead of changing the selected element from the list, multiselect just rewrites every name property of chosen element withe the value "United Arab Emirates".

I hope I could describe that problem correctly 😅

Answer 1

Try with @select and :value instead of v-model:

new Vue({
  el: '#demo',
  components: { Multiselect: window.VueMultiselect.default },
  data() {
    return {
      residence: {
        name: 'Not selected'
      },
      residenceOptions: [
        { name: 'Not selected' },
        { name: 'Albania' },
        { name: 'Algeria' },
        { name: 'United Arab Emirates'}
      ]
    }
  },
  methods: {
    uae() {
      this.residence.name = 
        this.residence.name !== 'United Arab Emirates' ?
          'United Arab Emirates' :
          'Not selected'
    },
    onSelect(option) {
      this.residence.name = option.name
    }
  }
})

<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <multiselect
     :value='residence'
     :options='residenceOptions'
     label='name'
     placeholder='Residence'
     @select="onSelect"
  >
    <template slot='singleLabel' slot-scope='{ option }'>
       <strong>{{ option.name }}</strong>
    </template>
  </multiselect>
  <div class='form__checkbox'>
    <input
      id='quotationForm-resident'
      class='form__input'
      name='residence'
      type='checkbox'
      placeholder=''
      :checked='residence && residence.name === "United Arab Emirates"'
      @click='uae'
    />
  <p>{{residenceOptions}}</p><b>selected: {{residence}}</b>
</div>