Javascript 是否可以从组件外部更改 Vue Multiselect 选定值

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/vue-multiselect@2.1.0"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="demo">
  <div>
    <multiselect
       :value='residence'
       :options='residenceOptions'
       label='name'
       placeholder='Residence'
       @select="onSelect"
    >
        <template slot='singleLabel' slot-scope='{ option }'>
           <strong>{{ option.name }}</strong>
        </template>
      </multiselect>
      {{residenceOptions}}
      <b>{{residence}}</b>
      <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'
      />
  </div>
</div>