title: Vue Router Dynamically set Meta
body: <p>So I have a SPA using Vue and Vue Router. It is set up like an iOS app where when you click deeper into a view the title in the navbar changes. Right now I have this hardcoded in the routes.js file but would like to make it dynmaic. I can update the route meta within my view but that renders after the view is show so I need it to happen before route change. Here is the setup:</p>
  
  <p>route.js</p>
  
  <pre><code>//A route
   {   
        path: '/team/:username', 
        component: require('./views/team-single'),  
        name: 'profile', 
        meta:{ requiresAuth: true, title: 'Team Member', tabbar: false } 
    }
  </code></pre>
  
  <p>navbar.vue</p>
  
  <pre><code>//if the route has a title show that not the logo
   &lt;div class="navbar-item"&gt;
  
       &lt;transition name="fadeup"&gt;
           &lt;h1 v-if="$route.meta.title" class="navbar-title"&gt;{{ $route.meta.title }}&lt;/h1&gt;
           &lt;img src="/img/hopbak-green.svg" class="navbar-logo"  alt="hopbak" v-else&gt;
       &lt;/transition&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>So ideally it would be nice to pass the :username into the title in the route.js but I dont think thats possible. I have tried adding something like this to a view but like I said it gets called to late:</p>
  
  <p>team-member.vue</p>
  
  <pre><code>mounted(){
     this.$route.meta.title = this.user.username
  }
  </code></pre>
  
  <p>which does change it but not before the navbar already loaded. </p>
  
  <p><a href="https://i.stack.imgur.com/4cg2L.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4cg2L.png" alt="enter image description here"></a></p>