title: Cannot Import ES6 module into Vue single file component
body: <p>I am learning (tinkering with) ES6 modules and Vue.js, single file components (SFC). I built my project with the Vue CLI via the webpack-simple template. I get an error  "TypeError: Cannot read property 'name' of undefined" at the line with "settings.mainAlarm.name". "npm run dev" does not throw any errors so I believe the build step is finding (and perhaps ignoring) the settings.js file. What is the best way to import reusable JavaScript into a Vue SFC? </p>
  
  <p>Root.vue file:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;h1&gt;{{ msg }}&lt;/h1&gt;
      &lt;h4&gt;{{ alarmName }}&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    //const settings =  mainAlarm;
    import settings from './lib/settings.js'
  
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Blah Blah Blah!',
          alarmName: settings.mainAlarm.name
        }
      }
    }
    //console.log(this.alarmName);
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>./lib/settings.js file: </p>
  
  <pre><code>export default function () {
      var rtn = {
          mainAlarm: {
              name: "overdueCheckAlarm",
              info: {  delayInMinutes: .01,  periodInMinutes: .25  }
          },
          notificationAudioFile: "ache.mp3",
          baseUrl: "www.xxx.com/xx/xxxx-xxx/"
      }
      return rtn;
  }
  </code></pre>