title: Vue component not re rendering on new $router.push
body: <p>So I have this SearchResult component which when invoked by vue-router, fetches an object from YouTube API v3 passes the recieved object as props to dozens of child components. I have a search bar which uses <code>$router.push(/search/ + this.query)</code> to change routes and display this component.</p>
  
  <p>The problem is that it works great for the first time or when I'm using search from some other route. But when I search again the component <strong>doesn't</strong> re-renders with new results from the API. Even though I've added a watcher for <code>this.$route.params.query</code>. Here is SearchResult.vue component.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;app-banner&gt;&lt;/app-banner&gt;
    &lt;div v-if="resultIds"&gt;
      &lt;div v-for="resId in resultIds.items"&gt;
        &lt;vid-preview :vidId="resId.id.videoId"&gt;&lt;/vid-preview&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  
  export default {
    data() {
      return {
        resultIds: null,
        errors: []
      }
    },
    watch: {
      '$route.params.query' (newQuery, oldQuery) {
        this.$router.push('/search/' + newQuery) //This code executes but no change visible on screen.
      }
    },
    created() {
      axios.get(`https://www.googleapis.com/youtube/v3/search/`, {
        params: {
          part: 'id',
          q: this.$route.params.query,
          order: 'relevance',
          maxResults: '50',
          key: '{API KEY}'
        }
      }).then(res =&gt; {
        this.resultIds = res.data;
      }).catch(e =&gt; {
        this.errors.push(e);
      })
    }
  }
  &lt;/script&gt;
  </code></pre>