title: How to prevent @change event when changing v-model value
body: <p>I'm building an auto-complete menu in Vue.js backed by Firebase (using vue-fire).  The aim is to start typing a user's display name and having match records show up in the list of divs below.   </p>
  
  <p>The template looks like this:</p>
  
  <pre><code>&lt;b-form-input id="toUser"
      type="text"
      v-model="selectedTo"
      @change="searcher"&gt;
  &lt;/b-form-input&gt;
  
  &lt;div v-on:click="selectToUser(user)" class="userSearchDropDownResult" v-for="user in searchResult" v-if="showSearcherDropdown"&gt;{{ user.name }}&lt;/div&gt;
  </code></pre>
  
  <p>Upon clicking a potential match the intention is to set the value of the  field and clear away the list of matches.</p>
  
  <p>Here is the code portion of the component:</p>
  
  <pre><code>computed: {
    /* method borrowed from Reddit user imGnarly: https://www.reddit.com/r/vuejs/comments/63w65c/client_side_autocomplete_search_with_vuejs/ */
    searcher() {
      let self = this;
      let holder = [];
      let rx = new RegExp(this.selectedTo, 'i');
      this.users.forEach(function (val, key) {
        if (rx.test(val.name) || rx.test(val.email)) {
          let obj = {}
          obj = val;
          holder.push(obj);
        } else {
          self.searchResult = 'No matches found';
        }
      })
      this.searchResult = holder;
      return this.selectedTo;
    },
  
    showSearcherDropdown() {
      if(this.searchResult == null) return false;
      if(this.selectedTo === '') return false;
      return true;
    }
  },
  
  methods: {
    selectToUser: function( user ) {
      this.newMessage.to = user['.key'];
      this.selectedTo = user.name;
      this.searchResult = null;
    }
  }
  </code></pre>
  
  <p>Typeahead works well, on each change to the input field the searcher() function is called and populates the searchResult with the correct values.   The v-for works and a list of divs is shown.</p>
  
  <p>Upon clicking a div, I call selectToUser( user ).   This correctly reports details from the user object to the console.</p>
  
  <p>However, on first click I get an exception in the console and the divs don't clear away (I expect them to disappear because I'm setting searchResults to null).</p>
  
  <pre><code>[Vue warn]: Error in event handler for "change": "TypeError: fns.apply is not a function"
  
  found in
  
  ---&gt; &lt;BFormInput&gt;
         &lt;BFormGroup&gt;
           &lt;BTab&gt;
  
  TypeError: fns.apply is not a function
      at VueComponent.invoker (vue.esm.js?efeb:2004)
      at VueComponent.Vue.$emit (vue.esm.js?efeb:2515)
      at VueComponent.onChange (form-input.js?1465:138)
      at boundFn (vue.esm.js?efeb:190)
      at invoker (vue.esm.js?efeb:2004)
      at HTMLInputElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1802)
  </code></pre>
  
  <p>If I click the div a <em>second</em> time then there's no error, the input value is set and the divs disappear.</p>
  
  <p>So I suspect that writing a value to this.selectedTo (which is also the v-model object for the  element is triggering a @change event.   On the second click the value of  doesn't actually change because it's already set, so no call to searcher() and no error.</p>
  
  <p>I've noticed this also happens if the  element loses focus.  </p>
  
  <p><strong>Question</strong>: how to prevent an @change event when changing v-model value via a method?</p>
  
  <p>(other info: according to package.json I'm on vue 2.5.2)</p>