title: How to create local helpers to tidy up Vue components
body: <p>I have a Vue component that does a number of complex tasks in <code>mounted()</code>.  These tasks include for example, initializing Bootstrap Date Pickers, Time Pickers, and Typeaheads.</p>
  
  <p>At the moment all of this initialization code is in my <code>mounted()</code> method.  In order to understand what's going on, the developer has to read through the code comments.</p>
  
  <p>Ideally I would move sections of code to their own methods, and only have method calls in <code>mounted()</code>, something such as: </p>
  
  <pre><code>mounted () {
    this.helpers.initDatePickers();
    this.helpers.initTimePickers();
    this.helpers.initTypeaheads();
  }
  </code></pre>
  
  <p>How can I achieve this?  I realise that I can put them in the <code>methods</code> object, but I would prefer to leave that for methods which can be accessed via declarations in templates.</p>
  
  <p>Note that I am not asking how to share helper functions across components (or globally).  I am merely asking how to create local functions in their own space, in order to clean up some longer methods.</p>