title: How to access route query parameter when creating component?
body: <p>When I create or mount my component, this.$route.query is undefined, but it should contain the URL get parameters, eg. <code>?page=3</code>.</p>
  
  <p>I'm making a paginated API browser.</p>
  
  <p>Upon mounting my component, I'm constructing an object (to fetch data) that needs the URL query parameter <code>"page"</code> if it is present (<code>"/admin/trees?page=3"</code>).</p>
  
  <p>When my component is mounted, however, <code>this.$route.query.page</code> is undefined for the first few hundred milliseconds. If I delay my object creation with setTimeout, <code>this.$route.query.page</code> is correctly set.</p>
  
  <p><strong>How can I make sure <code>vue-router</code> has already processed the URL query when I run my component?</strong></p>
  
  <p>While <code>setTimeout</code> works, it feels brittle and I don't understand why this is the case.</p>
  
  <p>Following is the script section of my component:</p>
  
  <pre><code>&lt;script&gt;
  import Forest from './forest'
  
  export default {
    name: 'app',
    data: () =&gt; ( { forest: [] } ),
    mounted: function() {
      setTimeout( () =&gt; {
        window.forest = Forest(this.fetchData, this.$route.query.page)
      }, 300)
    },
    methods: {
      fetchData() {
        this.forest = forest.trees
        this.total = forest.total
      }
    }
  }
  &lt;/script&gt;
  </code></pre>