title: vue component to use common functions
body: <p>I'm looking to get a handle on the Vue CLI3 project system. Currently refactoring a long single html file of in-line vue into real '.vue' components. One goal is to use some common functions among my vue components for various things.
  In my common-functions.js file I've got something like this:</p>
  
  <pre><code>function capitalize(str) {
      return str[0].toUpperCase() + str.substr(1, );
  };
  </code></pre>
  
  <p>And in my HelloWorld.vue file I've got this and it's not working through many various attempts. All searches I find seem to be dealing with other things, surely there's an easy way to just use some common functions, right??</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="hello"&gt;
      &lt;h1&gt;{{ msg }}&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li v-for='c in categoryNames'&gt;{{ c }}&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
    require('../js/common-functions.js');
  
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: capitalize('welcome to Your Vue.js App!'),
          categoryNames : this.$root.categoryNames
        }
      }
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Of course the message is:</p>
  
  <pre><code>[Vue warn]: Error in data(): "ReferenceError: capitalize is not defined"
  
  found in
  
  ---&gt; &lt;HelloWorld&gt; at src/components/HelloWorld.vue
         &lt;App&gt; at src/App.vue
           &lt;Root&gt;
  </code></pre>