title: How to load the <script> part of a Vuejs single file component before <template>
body: <p>In connection to the question I asked <a href="https://stackoverflow.com/questions/41845698/webpack-issue-when-compiling-js-files">here</a>, I have realised that my issue maybe because the template is being loaded before the script and when it gets an error that the variable is not defined, it stops the script from running. If that is the case then it's maybe because of <code>use strict</code> which is somewhere in my node_modules and not in my code.</p>
  
  <p>My components look like this:</p>
  
  <pre><code>&lt;style lang="sass"&gt;
      .hero {
          color: white;
          padding-top: 10em;
      }
      .image {
          background: no-repeat;
          background-size: 100% 100%;
          height: 600px;
          box-shadow:inset 0 0 0 2000px rgba(0,0,50,0.3);
      }
  &lt;/style&gt;
  
  &lt;template&gt;
      &lt;div :style="{ backgroundImage: 'url(' + components.carousel.content.image + ')' }" class="image"&gt;
          &lt;div class="row hero"&gt;
              &lt;div class="small-8 medium-6 columns"&gt;
                  &lt;h2&gt;Welcome to &lt;strong&gt;{{components.site.name}}&lt;/strong&gt;
                      &lt;br/&gt; {{components.carousel.content.tag_line}}&lt;/h2&gt;
                  &lt;br&gt;
  
                  &lt;p&gt;
                      {{components.carousel.content.perks_1}} &amp;nbsp; | &amp;nbsp;
                      {{components.carousel.content.perks_2}} &amp;nbsp; | &amp;nbsp;
                      {{components.carousel.content.perks_3}}
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
      import homepageMixin from '../mixin';
  
      export default {
          mixins: [homepageMixin],
  
          data: function () {
              return {
                  components: ''
              }
          }
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>When I load I get this error:</p>
  
  <blockquote>
    <p>[Vue warn]: Error when rendering component carousel: 
    ...</p>
    
    <p>vue.js?3de6:2229 Uncaught TypeError: Cannot read property 'content' of
    undefined</p>
  </blockquote>
  
  <p>I had been using it like that for a long time as it was loading the data after and replacing it in the template, but after I tried to install babel, it somehow enforces <code>use strict</code> now. When I check the difference between the compiled JS file before and after I realise that this line was at the bottom but now its being compiled at the top before my components.</p>
  
  <blockquote>
    <p>var g;\r\n\r\n// This works in non-strict mode\r\ng = (function() { return this; })();</p>
  </blockquote>
  
  <p>A solution would be to load the script first so the by the time the template is loaded the the data is available. How can I do that?</p>