title: Vue router - Handle query params
body: <p>I have a <code>&lt;search-bar&gt;</code> component that have some dropdown that i will use as filter search. When I press the <code>submit</code> button i run the following code:</p>
  
  <pre><code>search() {
    let query = {
        status: this.selectedOrderStatus
    };
  
    this.$router.push({ path: '/', query: query })
  }
  </code></pre>
  
  <p>This will chage my url as: <a href="http://localhost:8080?status=1" rel="nofollow noreferrer">http://localhost:8080?status=1</a> or <a href="http://localhost:8080?status=2" rel="nofollow noreferrer">http://localhost:8080?status=2</a> and its ok.</p>
  
  <p>In another component (that is the <code>/</code> component) i have place a watch to handle url change, like this:</p>
  
  <pre><code>watch: {
   '$route': 'loadOrders'
  },
  </code></pre>
  
  <p>So, when in my dropdown i choice a value, the component is reloaded.</p>
  
  <p>But, if i'm on url <a href="http://localhost:8080?status=1" rel="nofollow noreferrer">http://localhost:8080?status=1</a> and i press <strong>submit button</strong> nothing happen. I have to choice another value (for example 2) to make the reload.</p>
  
  <p>How i can handle the reload every time i press the submit button? Because, i would like to press "Submit" again, using the same parameter.</p>