title: vue.js v-model not updating if vue-range-slider component on page
body: <p>I have a problem with the structure of my Vue.js components, but I don't understand what it is.</p>
  
  <p>This is my <code>app.js</code>:</p>
  
  <pre><code>require('./bootstrap');
  
  window.Vue = require('vue');
  
  Vue.component('search', require('./components/Search').default);
  Vue.component('graph', require('./components/Graph').default);
  Vue.component('account', require('./components/Account').default);
  Vue.component('design-theme', require('./components/DesignTheme').default);
  
   const app = new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    mounted: function () {
    },
    computed: {
    }
  });
  </code></pre>
  
  <p>So I don't have any methods or anything here, it is all in the four individual components. Each component works fine on its own, but when there is more than one in a page, something is off. Consider the <code>Search.vue</code> component. It simply sends an <code>axios</code> request to the server on keyup and shows a list of results:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="search basic-search"&gt;
          &lt;input type="text" v-model="search_string" v-on:keyup="search" class="form-control search" placeholder="Search" value=""/&gt;
          &lt;div :class="['search-results', active === true ? 'active' : '']"&gt;
              &lt;div class="search-result" v-for="result in search_results" v-on:click="submit(result.id)"&gt;
                  {{ result.name }}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data: function() {
              return {
                  search_string : '',
                  search_results : [],
                  active : false
              };
          },
  
          methods : {
              search : function() {
                  const axios_data = {
                      _token  : $('meta[name="csrf-token"]').attr('content'),
                      str : this.search_string
                  };
  
                  axios.post('/search', axios_data).then(response =&gt; {
  
                      if(response.data.success){
                          this.search_results = response.data.stocks;
                          this.active = true;
                      }
  
                  });
              },
  
              submit : function(stock_id) {
                  document.location = "/graphs/" + stock_id;
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This works fine if the <code>Graph.vue</code> component is not included on the page. But, if it is, then <code>search_str</code> always remains empty, even though the <code>search</code> method is called on <code>keyup</code>.</p>
  
  <p>There are no errors in the console - it's just that <code>search_string</code> remains empty when I type (as does the input field).</p>
  
  <p>Perhaps I don't understand something on a conceptual level in Vue.js, but I can't figure out the relation here, or how to adapt the code to this situation.</p>
  
  <p>This is the problematic part of the <code>Graph</code> component, if this is removed then the search works OK.</p>
  
  <pre><code>&lt;vue-range-slider v-model="range" :min="0" :max="100" v-on:drag-end="updateRange"&gt;&lt;/vue-range-slider&gt;
  </code></pre>
  
  <p>This is the component in question:</p>
  
  <p><a href="https://github.com/xwpongithub/vue-range-slider" rel="nofollow noreferrer">https://github.com/xwpongithub/vue-range-slider</a></p>
  
  <p>Another interesting side effect (that I just noticed) is that, when this component is on the page, it is impossible to select text with the mouse. It seems like the component is somehow hijacking events, but I don't understand how.</p>