title: vue.js Uncaught SyntaxError: Identifier has already been declared
body: <p>I have two demos for same library under <a href="https://github.com/MoYummy/vue-top-down/tree/master/example" rel="noreferrer">repo</a>, with <a href="https://moyummy.github.io/vue-top-down/example/" rel="noreferrer">demo</a>.</p>
  
  <p>The main difference is that, one is for <code>browser</code> use and the other is for <code>node</code> use.</p>
  
  <p>However <code>browser</code> one will have error</p>
  
  <pre><code>index.js:1 Uncaught SyntaxError: Identifier 'HeaderComp' has already been declared
  </code></pre>
  
  <p>What is the main cause?</p>
  
  <p><strong>Update:</strong> </p>
  
  <ol>
  <li><p>Please keep in mind I do not declare a variable twice! I also tried to add console log at the top to ensure the script is executed once!</p>
  
  <pre>
  
  var HeaderComp = {
    name: 'HeaderComp',
    template: `
    Back
    {{ r.title }}
  `,
    mixins: [VueTopDown.VueTopDownItem],
    computed: {
      routes () {
        return [
          { href: '/page', title: 'Page' },
          { href: '/hello-vue', title: 'HelloVue' }
        ]
      }
    }
  }
  
  var FooterComp = {
    name: 'FooterComp',
    template: `{{ vueFooter }}`,
    mixins: [VueTopDown.VueTopDownItem],
    data () {
      return {
        vueFooter: 'This is Vue Footer'
      }
    }
  }
  
  var ContentComp = {
    name: 'ContentComp',
    template: ``,
    mixins: [VueTopDown.VueTopDownItem],
    computed: {
      innerHTML () {
        var root = document.createElement('div')
        root.innerHTML = this[VTDConstants.OUTER_HTML]
        return root.querySelector('*').innerHTML
      }
    }
  }
  
  var HelloVue = {
    template: `Hello Vue`,
    props: ['clazz'],
    inheritAttrs: false
  }
  
  var Page = {
    template: ``,
    props: ['clazz', 'innerHTML'],
    inheritAttrs: false
  }
  
  var router = new VueRouter([
    { path: '/hello-vue', component: HelloVue },
    { path: '/page', component: Page },
    { path: '*', redirect: '/page' }
  ])
  
  var inst = new Vue({
    router,
    mixins: [VueTopDown.VueTopDown],
    components: {
      HeaderComp: HeaderComp,
      FooterComp,
      ContentComp
    },
    data () {
      return {
        [VueTopDown.VTDConstants]: {
          'header': HeaderComp,
          'footer': FooterComp,
          '.content': ContentComp
        }
      }
    }
  })
  
  inst.$mount('#app')
  
  </pre></li>
  <li><p>Also keep in mind that similar code works fine in <code>node</code> environment but fails in <code>browser</code>!</p></li>
  <li><p>Doesn't occur if commenting out <code>inst.$mount('#app')</code></p></li>
  </ol>
  
  <p><strong>Expect</strong></p>
  
  <p>The expected behavior of <code>browser</code> should be same as that of <code>node</code>.</p>