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

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