title: Multiple file Vue js setup -- [Vue warn]: Error in v-on handler: "TypeError: formSubmitMessage is not a function"
body: <p>I'm using javascript. I used Vue and traditional html to write a reactive single page app, and I want to port it over to vue cli. I have several js files. One has a function in it that I want to call using Vue single file components. One of the js files is called 'controls.js'. One is called 'v.js'. The v.js file has a vue instance. I want to run a function in control.js from the v.js file.</p>
  <pre><code>//error msg
  [Vue warn]: Error in v-on handler: &quot;TypeError: formSubmitMessage is not a function&quot;
  
  found in
  
  ---&gt; &lt;Message&gt; at src/components/Message.vue
         &lt;Appx&gt; at src/App.vue
           &lt;Root&gt;
  warn @ vue.runtime.esm.js?2b0e:619
  logError @ vue.runtime.esm.js?2b0e:1884
  globalHandleError @ vue.runtime.esm.js?2b0e:1879
  handleError @ vue.runtime.esm.js?2b0e:1839
  invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
  invoker @ vue.runtime.esm.js?2b0e:2179
  original._wrapper @ vue.runtime.esm.js?2b0e:6917
  vue.runtime.esm.js?2b0e:1888 
  
  TypeError: formSubmitMessage is not a function
      at Vue.useFormSubmitMessage (v.js?e9d2:118)
      at VueComponent.useFormSubmitMessage (App.vue?234e:202)
      at click (eval at ./node_modules/cache-loader/dist/cjs.js?{&quot;cacheDirectory&quot;:&quot;node_modules/.cache/vue-loader&quot;,&quot;cacheIdentifier&quot;:&quot;9216e95a-vue-loader-template&quot;}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Message.vue?vue&amp;type=template&amp;id=61d2d687&amp; (app.js:1082), &lt;anonymous&gt;:33:42)
      at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
      at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
      at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
  logError @ vue.runtime.esm.js?2b0e:1888
  globalHandleError @ vue.runtime.esm.js?2b0e:1879
  handleError @ vue.runtime.esm.js?2b0e:1839
  invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
  invoker @ vue.runtime.esm.js?2b0e:2179
  original._wrapper @ vue.runtime.esm.js?2b0e:6917
  </code></pre>
  <pre><code>// v.js
  import Vue from &quot;vue&quot;;
  import appx from &quot;../App.vue&quot;;
  
  require(&quot;./populate.js&quot;);
  const   {formSubmitMessage, preview_image_msg} = require ('./populate.js');
  
  export function doLoad() {
  
    let visibility = new Vue({
      el: '#app',
      render: h =&gt; h(appx),
      data() {
        return {
          login: false,
          register: false,
          newsfeed: false,
          home: true,
          banner: true,
          form_message: false,
          form_exercise: false,
          form_workout: false
        };
      },
      mounted() {
        console.log(&quot;mounted&quot;);
      
      },
      methods: {
        classOption: function (i) {
          
          const x = Boolean(i);
          if (x === true) return 'visi';
          else return 'invis';
        },
        // this is only part of list of functions.
        useFormSubmitMessage: function () { 
          formSubmitMessage();  //&lt;&lt;-- this does not work.
          
        }
  
  
      }
    });
  
  }
  </code></pre>
  <pre><code>//main.js
  import Vue from &quot;vue&quot;;
  
  import './../node_modules/bulma/css/bulma.css';
  import &quot;./../node_modules/@fortawesome/fontawesome-free/js/all.js&quot;
  import '@/assets/bulma.css';
  
  
  require(&quot;./js/v.js&quot;);
  
  import { doLoad } from &quot;./js/v.js&quot;;
  
  doLoad();
  
  //App.vue
  &lt;template&gt;
    &lt;div id=&quot;appx&quot;&gt;
       &lt;message
        :newsfeed=&quot;newsfeed&quot;
        :banner=&quot;banner&quot;
        :login=&quot;login&quot;
        :register=&quot;register&quot;
        :home=&quot;home&quot;
        :form_message=&quot;form_message&quot;
        :form_exercise=&quot;form_exercise&quot; 
        :form_workout=&quot;form_workout&quot;
        :focusRegister=&quot;focusRegister&quot;
        :focusNews=&quot;focusNews&quot;
        :focusReset=&quot;focusReset&quot;
        :focusLogin=&quot;focusLogin&quot;
        :focusFormMessage=&quot;focusFormMessage&quot;
        :useFormSubmitMessage=&quot;useFormSubmitMessage&quot;
  
      &gt;&lt;/message&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import &quot;./../node_modules/bulma/css/bulma.css&quot;;
  import &quot;@/assets/bulma.css&quot;;
  
  import bannercomponent from &quot;./components/Banner.vue&quot;;
  import feedcontainer from &quot;./components/FeedContainer.vue&quot;;
  import register from &quot;./components/Register.vue&quot;;
  import home from &quot;./components/Home.vue&quot;;
  import login from &quot;./components/Login.vue&quot;;
  import message from &quot;./components/Message.vue&quot;;
  
  import { visibility, newsfeed, banner } from &quot;./js/v.js&quot;;
  const   {formSubmitMessage} = require ('./js/populate.js');
  
  
  export default {
    name: &quot;appx&quot;,
    data() {
      return {
  
        login: this.$root.login,
        register: this.$root.register,
        home: this.$root.home,
        form_message: this.$root.form_message,
        form_exercise: this.$root.form_exercise,
        form_workout: this.$root.form_workout,
        newsfeed: this.$root.newsfeed,
        banner: this.$root.banner,
      };
    },
    components: {
      bannercomponent: bannercomponent,
      feedcontainer: feedcontainer,
      register: register,
      home: home,
      login: login,
      message: message
    },
  
    mounted() {
      console.log(&quot;appx&quot;);
      
    },
    methods: {
      classOption: function (i) {
  
        const x = Boolean(i);
        if (x === true) return &quot;visi&quot;;
        else return &quot;invis&quot;;
      },
      copyVals: function() {
        this.login = this.$root.login;
        this.register = this.$root.register;
        this.home = this.$root.home;
        this.form_message = this.$root.form_message;
        this.form_exercise = this.$root.form_exercise;
        this.form_workout = this.$root.form_workout;
        this.newsfeed = this.$root.newsfeed;
        this.banner = this.$root.banner;
      },
      
      useFormSubmitMessage: function () {
        this.$root.useFormSubmitMessage();
        this.copyVals();
      }
    },
  }; 
  
  &lt;/script&gt;
  </code></pre>
  <pre><code>
  // controls.js
  import Vue from &quot;vue&quot;;
  
  require(&quot;./v.js&quot;);
  
  import { subtreeStr, setMessage, insertFeed, setExercise } from './populate.js';
  import { focusNews } from &quot;./v.js&quot;;
  
  
  export function formSubmitMessage() {
    console.log(&quot;here 1&quot;);
    
    //do some things here that are not listed.
  }
  </code></pre>
  <pre><code>//Message.vue
  &lt;template&gt;
    
      &lt;!-- start inputform for message -- some listing has been removed --&gt;
      
      &lt;button class=&quot;button is-primary&quot; @click=&quot;useFormSubmitMessage();&quot;&gt;Submit&lt;/button&gt;
  
                      
     &lt;input class=&quot;file-input is-primary&quot; type=&quot;file&quot; name=&quot;resume&quot; id=&quot;pic-button&quot; ref=&quot;picButton&quot; @change=&quot;preview_image_msg($event)&quot; multiple&gt;
                          
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: &quot;message&quot;,
    data: () =&gt; ({
      
    }),
    props: {
      newsfeed: Boolean,
      focusFormMessage: Function,
      form_message: Boolean,
      useFormSubmitMessage: Function,
  
    },
    
  };
  &lt;/script&gt;
  </code></pre>
  <p>I don't know the proper way to include a function from another file.</p>