title: What does the name: 'app' line do in this Vue.js CLI code?
body: <p>What function does the <code>name: 'app'</code> have in the following Vue.js CLI code? </p>
  
  <p>I understand that the <code>export default</code> is used for </p>
  
  <blockquote>
    <p>"creating JavaScript modules to export functions, objects, or
    primitive values from the module so they can be used by other programs
    with the import statement" (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export" rel="nofollow noreferrer">docs</a>)</p>
  </blockquote>
  
  <p>and I understand the module to be what is in the <code>template</code> element, but I don't see where it is being imported. </p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;img src="./assets/logo.png"&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'app'
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Nor do I see what <code>name: 'app'</code> does exactly since if I change the name, the Vue.js. code still works, until when you change this in non-CLI Vue.js, e.g.</p>
  
  <pre><code>new Vue({
    el: '#app',
    ...
  });
  </code></pre>
  
  <p>If you change the '#app' then the code won't reference the element and it won't work anymore.</p>