title: How to correctly remove a vue-select multiselect item
body: <p>I have a vue-select multiselect (<a href="http://sagalbot.github.io/vue-select/" rel="nofollow noreferrer">http://sagalbot.github.io/vue-select/</a>) defined as </p>
  
  <pre><code>&lt;v-Select label="label" multiple :on-change="updateCities" :options="cities"&gt;&lt;/v-Select&gt;
  </code></pre>
  
  <p>The method updateCities is defined as </p>
  
  <pre><code>'updateCities': function (menuItem) {
              var name = ''
              // iterate thru the elements in the multiselect
              menuItem.forEach(function (elem, i) {
                  name = elem.label
                  return name
              })
              // push the selected element to an array in the data model
              this.state.city.push(name)
          }
  </code></pre>
  
  <p>and the data model is defined as</p>
  
  <pre><code>'data' () {
          return {
              'state': {
                  'city': []
              }
          }
      }
  </code></pre>
  
  <p>When I click on the multiselect and choose a city, both the menu and the data model array <code>city</code> is updated correctly but when I click on the X on the top right of the menu item to remove the element from menu and from the data model array <code>city</code>. as shown below
  <a href="https://i.stack.imgur.com/mtteY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mtteY.png" alt="enter image description here"></a></p>
  
  <p>The element is correctly removed from the menu but not from the data model array <code>city</code>.</p>
  
  <p>How do I fix this?</p>