VueJs - $route not available on page load

Question

I seem to have an issue with Vue, I'm running it vie Vue UI which is handling the compiling. I'm trying to solve an issue I have VueJs - Passing query in query string as prop but I have noticed the below and I am not sure why.

URL = http://localhost:8080/?q=This%20is%20my%20query

mounted () {
    console.log(this.$route.query.q)
    console.log(this.$route.query)
}

Given the above url and the console.log the below outputs are happening. I can't figure out why the results are not the same

First visit to the url

undefined
Object {  }

After recompile and Vue UI hotreloads

This is my query
Object { q: "This is my query" }

Why can't I see this.$route on the first load?