title: Set page title with Vue Router
body: <p>I have created a <strong>vue-router</strong> with a page title (h1).
  Every vue-router link has a meta-title. How can I dynamically set my h1 page title? </p>
  
  <p>I have tried <code>$emit</code>, but this is not working in my router. How can I change my page title?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const dashboard = {
    template: `&lt;div&gt;DASHBOARD&lt;/div&gt;`
  }
  const about = {
    template: `&lt;div&gt;ABOUT&lt;/div&gt;`
  }
  
  const routes = [
    {path: '/dashboard', component: dashboard, name:'dashboard', meta: { title: 'Dashboard' }},
    {path: '/about', component: about, name:'about', meta: { title: 'About' }}
  ]
  const router = new VueRouter({
    routes // short for routes: routes
  })
  
  router.beforeEach((to, from, next) =&gt; {
    this.$emit('pagetitle', to.meta.title); // DOESN'T WORK!!
    next();
  });
  
  new Vue({
    el: '#app',
    router,
    data() {
      return {
        pagetitle: 'not set'
      }
    },
    watch: {
      '$route': function(value) {
      // I can use things like value.name === 'about', but "watch" doesn't set the page title at the first page load.
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vue-router/dist/vue-router.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;router-link to="/dashboard"&gt;Dashboard&lt;/router-link&gt;
    &lt;router-link to="/about"&gt;About&lt;/router-link&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
    &lt;h1 v-text="pagetitle"&gt;&lt;/h1&gt;
    How can I change the page title???
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>