title: Global mixins fired multiple times - Vue
body: <p>I've created a mixin to change the page titles, using <code>document.title</code> and global mixins.</p>
  
  <p>My mixin file (title.ts):</p>
  
  <pre><code>import { Vue, Component } from 'vue-property-decorator'
  
  function getTitle(vm: any): string {
    const title: string = vm.title
    if (title) {
      return `${title} | site.com`
    }
    return 'Admin panel | site.com'
  }
  
  @Component
  export default class TitleMixin extends Vue {
    public created(): void {
      const title: string = getTitle(this)
      if (title) {
        document.title = title
      }
    }
  }
  
  </code></pre>
  
  <p>Then i registered this mixin globally in main.ts:</p>
  
  <pre><code>import titleMixin from '@/mixins/title'
  Vue.mixin(titleMixin)
  </code></pre>
  
  <p>Then setting up the title in a Vue component:</p>
  
  <pre><code>@Component
  export default class Login extends Vue {
    public title: string = 'New title'
  }
  </code></pre>
  
  <p>I have like 5 components in my project, if i use <code>console.log</code> in a mixin, i can see that it fired in every component, step by step, thus <code>document.title</code> is set by a last component <code>created()</code> hook.</p>
  
  <p>How to correctly set a title for a CURRENT page?</p>