title: How to separate the methods of a .vue component in an external .js file?
body: <p>My component was left with many lines of code, so I decided to put the methods in a separate file called functions.js. I can not call those methods.</p>
  <p>I tried this:</p>
  <p>functions.js</p>
  <pre><code>function sendList() {...};
  function getLists() {...};
  function deleteList(listId) {...}
  
  export default {sendList, getLists, deleteList}
  </code></pre>
  <p>MyLayout.vue</p>
  <pre><code>...
  &lt;script&gt;
  import {sendList, getLists, deleteList} from '../statics/functions.js'
  ...
  created() { this.getLists();},
  ...
  </code></pre>
  <p>3 errors appear:</p>
  <blockquote>
  <p>vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in created hook: &quot;TypeError: this.getLists is not a function&quot;</p>
  <p>TypeError: this.getLists is not a function</p>
  <p>Property or method &quot;lists&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
  </blockquote>