title: Vue.js app no errors but white page
body: <p>I'm trying to learn Vue. 
  I read this <a href="https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/" rel="noreferrer">tutorial</a> and I'm trying to split it in single file components using the standard vue-cli webpack template. I don't have any error in console but the page is white, and I cannot understand why. </p>
  
  <p>This is my main.js file</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App'
  
  Vue.config.productionTip = false
  window.axios = require('axios');
  
  const NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
  const ApiKey = "18e1540d187c4b46bae767782750f9fd";
  const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world";
  
  function buildUrl (url) {
    return NYTBaseUrl + url + ".json?api-key=" + ApiKey
  }
  
  const vm = new Vue({
    el: '#app',
    data: {
      results: [],
      sections: SECTIONS.split(', '), // create an array of the sections
      section: 'home', // set default section to 'home'
      loading: true,
      title: ''
    },
    mounted () {
      this.getPosts('home');
    },
    methods: {
      getPosts(section) {
        let url = buildUrl(section);
        axios.get(url).then((response) =&gt; {
          this.loading = false;
          this.results = response.data.results;
          let title = this.section !== 'home' ? "Top stories in '"+ this.section + "' today" : "Top stories today";
          this.title = title + "(" + response.data.num_results+ ")";
        }).catch((error) =&gt; { console.log(error); });
      }
    }
  });
  </code></pre>
  
  <p>And this is the App.vue file</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;h1&gt;Test&lt;/h1&gt;
      &lt;product-list&gt;&lt;/product-list&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Products from './components/Products'
  
  export default {
    name: 'app',
    components: {
      Products
    }
  }
  &lt;/script&gt;
  
  &lt;style lang="sass" &gt;
    @import '~bulma/sass/utilities/initial-variables.sass'
    @import "~bulma/sass/utilities/_all"
    @import "~bulma/sass/base/_all"
    @import "~bulma/sass/grid/columns"
    @import "~bulma/sass/components/_all"
  &lt;/style&gt;
  </code></pre>
  
  <p>I also create a Products.vue file in the components folder</p>
  
  <pre><code>&lt;template id="product-list"&gt;
    &lt;section&gt;
      &lt;div class="row" v-for="posts in processedPosts"&gt;
        &lt;div class="columns large-3 medium-6" v-for="post in posts"&gt;
          &lt;div class="card"&gt;
          &lt;div class="card-divider"&gt;
          {{ post.title }}
          &lt;/div&gt;
          &lt;a :href="post.url" target="_blank"&gt;&lt;img :src="post.image_url"&gt;&lt;/a&gt;
          &lt;div class="card-section"&gt;
            &lt;p&gt;{{ post.abstract }}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  &lt;/template&gt;
  
  Vue.component('Products', {
    props: ['results'],
    template: "#product-list",
    computed: {
      processedPosts() {
        let posts = this.results;
  
        // Add image_url attribute
        posts.map(post =&gt; {
          let imgObj = post.multimedia.find(media =&gt; media.format === "superJumbo");
          post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A";
        });
  
        // Put Array into Chunks
        let i, j, chunkedArray = [],
          chunk = 4;
        for (i = 0, j = 0; i &lt; posts.length; i += chunk, j++) {
          chunkedArray[j] = posts.slice(i, i + chunk);
        }
        return chunkedArray;
      }
    }
  });
  </code></pre>
  
  <p>Everything looks fine for me (except for the <code>window.axios = require('axios');</code> that I don't understand why is not present in the original tutorial) but the page is blank and also the  tag I add for debug is not present in the DOM.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Looks like the code is not compiled.</p>
  
  <p>My page source code is</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;!-- built files will be auto injected --&gt;
    &lt;script type="text/javascript" src="/app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>** Edit 2 **</p>
  
  <p>I understand the problem. This is my index.html. </p>