title: Component `mounted` fires twice on page load
body: <p>I have a very weird error where on page load a components <code>mounted</code> and <code>beforeMount</code> fire/run twice? Each of my components represents a page, so when I load the page on <code>mywebsite.com/contact</code> the <code>Contact.vue</code> functions <code>mounted</code> and <code>beforeMount</code> fire/run twice but if I load the page on <code>mywebsite.com/foo</code> the <code>Contact.vue</code> functions <code>mounted</code> and <code>beforeMount</code> fire/run once (which is what I <em>think?</em> should happen).</p>
  
  <p>Any idea why these functions would execute twice? I have a bit of finicky setup but it work nicely for dynamic templates.</p>
  
  <p><code>router/index.js</code>: </p>
  
  <pre><code>const router = new Router({
  routes: [
    {
        path: (window.SETTINGS.ROOT || '') + '/:slug',
        name: 'Page',
        component: Page,
        props: true
    },
  ]
  })
  </code></pre>
  
  <p><strong>Page.vue:</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;component v-if="wp" :is="templateComponent" v-bind:wp="wp"&gt;&lt;/component&gt;
    &lt;p v-else&gt;Loading...&lt;/p&gt;
  &lt;/template&gt;
  
  &lt;script type="text/javascript"&gt;
  
  import { mapGetters } from 'vuex'
  import * as Templates from './templates'
  
  // Map templates
  let templateCmps = {}
  _.each(Templates, cmp =&gt; {
    templateCmps[cmp.name] = cmp
  })
  
  export default {
  
  props: ["slug"],
  
  components: {
    ...templateCmps
  
    // Example:
    // 'default': Templates.Default,
    // 'contact': Templates.Contact,
    // 'home': Templates.Home,
  },
  
  computed: {
    ...mapGetters(['pageBySlug']),
  
    wp() {
      return this.pageBySlug(this.slug);
    },
  
    templateComponent() {
      let template = 'default' // assign default template
  
      if (!_.isNull(this.wp.template) &amp;&amp; this.wp.template.length)
        template = this.wp.template.replace('.php','').toLowerCase()
  
      return template
    }
  },
  
  created() {
    this.$store.dispatch('getPageBySlug', { slug: this.slug })
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Contact.vue:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;main&gt;&lt;/main&gt;
  &lt;/template&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
  export default {
  
      name: 'contact',
  
      mounted() {
        console.log('Contact::mounted') // this outputs twice
      },
  
      beforeMount() {
        console.log('Contact::beforeMount') // this outputs twice
      }
  }
  
  &lt;/script&gt;
  </code></pre>