title: How to divide Vue.js code?
body: <p>I'm discovering that I find Vue.js extremely confusing and even frustrating to work with: I have a Node.JS project with WebPack that has HTML, JS and CSS files (see the code below). 
  When I try to execute the JS as written, it works. However, it has the flaw that the <code>Vue.material.setCurrentTheme('orange');</code> JS line sets the theme globally as I understand it, which is undesirable.  </p>
  
  <p>To fix this, I figured I could remove the JS line above and add a <code>md-theme="orange"</code> attribute to the <code>&lt;md-toolbar&gt;</code> element in the HTML. </p>
  
  <p>This results in the theme not being applied at all, as well as an innocent looking warning in the browser JS console: <code>The theme 'orange' doesn't exists. You need to register it first in order to use.</code> 
  I've figured out that this basically means that the JS is loaded too late and thus when the <code>&lt;md-toolbar&gt;</code> element is loaded the theme is not yet defined.</p>
  
  <p>Ok fair enough, so I change the <code>$(document).ready(function () { ... });</code> JS block to remove the waiting for the document to be ready, so that only the <code>var App = ...</code> and the theme registration remain, and live on the top-level of the JavaScript file. Now I get a hard error in the browser JS console: <code>client.gen.js:16329 [Vue warn]: Cannot find element: #AvApp</code></p>
  
  <p>I have 2 questions about this:</p>
  
  <ol>
  <li><p>How do I fix this? The docs have been no help so far.</p></li>
  <li><p>Why is Vue.JS defined to need circular dependencies like that, at least when using WebPack? It makes totally no sense whatsoever. In fact this seems to have negative value as it is actively preventing me from getting work done rather than helping me.</p></li>
  </ol>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;!-- Use Roboto and Google Icons from Google CDN --&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet"&gt;
          &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  
          &lt;!-- Load the generated client code --&gt;
          &lt;script src="./client.gen.js"&gt;&lt;/script&gt;
  
          &lt;title&gt;Foo&lt;/title&gt;
          &lt;link rel="shortcut icon" href="img/favicon.png" type="image/x-icon"&gt;
          &lt;link rel="icon" href="img/favicon.ico" type="image/x-icon"&gt;
      &lt;/head&gt;
      &lt;body &gt;
  
          &lt;div id="AvApp"&gt;
  
              &lt;!-- nav bar --&gt;
              &lt;md-toolbar&gt;
                  &lt;md-button class="md-icon-button md-raised md-accent"&gt;
                      &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
                  &lt;/md-button&gt;
                  &lt;h1 class="md-title center"&gt;Foo&lt;/h1&gt;
                  &lt;md-button class="md-icon-button md-raised md-primary"&gt;
                      &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
                  &lt;/md-button&gt;
              &lt;/md-toolbar&gt;
  
              &lt;!-- main content --&gt;
              &lt;div&gt;
                  &lt;p&gt;
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                      Quo, rerum? Error sunt, aperiam dolores, atque expedita
                      molestiae tenetur. Quis eveniet accusamus velit explicabo
                      adipisci reiciendis modi eaque quas, officia excepturi.
                  &lt;/p&gt;
              &lt;/div&gt;
  
  
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>/*jshint sub:true, esversion: 6 */
  
  import d3 from 'd3';
  import $ from 'jquery';
  import _ from 'lodash';
  import moment from 'moment';
  import q from 'q';
  import Vue from 'vue';
  import VueMaterial from 'vue-material';
  
  import './amplify-viz.css';
  import 'vue-material/dist/vue-material.css';
  
  Vue.use(VueMaterial);
  
  
  function log(msg) {
      console.log(`\n[CLIENT] ${msg}`);
  }
  
  
  
  $(document).ready(function () {
      var App = new Vue({
          el: '#AvApp'
      });
  
      Vue.material.registerTheme({
          default: {
              primary: {
                  color: 'light-green',
                  hue: 700
              },
              accent: 'red',
              background: '#263238'
          },
          teal: {
              primary: 'blue',
              accent: 'pink',
              background: 'yellow'
          },
          orange: {
              primary: {
                  color: 'orange',
                  hue: 700
              },
              accent: {
                  color: 'deep orange',
                  hue: 900
              }
          }
      });
  
      Vue.material.setCurrentTheme('orange');
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.center {
      text-align: center;
      flex: 1;
  }
  </code></pre>