title: Splitting Vue methods into multiple files?
body: <p>Currently i have a file in which i am rendering stuff conditionally based on route params. I intend to have 9 different params that render 9 different sets of information/features.</p>
  
  <p>At the moment i have only implemented one of these sets of features into this singular file, and the file is very large, mostly due to the <code>methods</code> sections.</p>
  
  <p>In Vue (with webpack), what is the best way to split one document into multiple documents without having to do a tonne of edit work to keep the functionality.</p>
  
  <p>This is the current structure of the document:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class='container' v-if="id=='exampleparam'"&gt;&lt;/div&gt;
    &lt;!-- This is repeated 9 times, with forms etc. inside each div for functionality --&gt;
  &lt;/template&gt;
  exports default {
      data () {
          return {
             //data stuff
          }
      },
      methods: {
          //methods for feature 1
  
          //methods for feature 2
  
          //etc.....
      },
  
      created () {
          //Authentication stuff that i want to stay in this file
  
          switch(this.id){
              case 'exampleparam':
                  this.getAllExampleParamData() //function to get information for this feature from database
                  break
  
              //Repeat cases for each feature
          }
      }
  }
  //Styles for the page
  &lt;styles&gt;&lt;/styles&gt;
  </code></pre>