title: Vue: how to apply multiple global mixins
body: <p>I am currently working on a Vue project including multiple applications. 
  It has project-wide used methods and application-wide used methods.
  Therefore, I created 2 mixins which need to be available in every Vue component. However, I don't know how to implement it using Vue.mixin().
  Please help.</p>
  
  <p>I tried this. Not work..</p>
  
  <p>The error says <code>"Cannot read property 'VALIDATION' of undefined"</code>.
  Somehow URL is not imported. URL() returns a object where urls are defined according to either DEV or PRODUCTION mode.</p>
  
  <pre><code>import global_mixin from './global_mixin.js'
  import application_mixin from './application_mixin.js'
  
  Vue.mixin(global_mixin)
  Vue.mixin(application_mixin)
  
  new Vue({
    el: '#app',
    render: h =&gt; h(App)
  })
  </code></pre>
  
  <p>global_mixin.js</p>
  
  <pre><code>export default {
    data() {
      return {
        // data items
      }
    }
  }
  </code></pre>
  
  <p>application_mixin.js</p>
  
  <pre><code>import { URL } from './_util'
  
  export default {
    data() {
      return {
        URL_VALIDATION: URL().VALIDATION
      }
    }
  }
  </code></pre>
  
  <p>_util.js</p>
  
  <pre><code>import store from './_store'
  
  export const URL = () =&gt; {
    const urls = {
      PROD: {
        VALIDATION: '/api/web/company/profile/validation',
        PROFILE: '/api/web/company/profile',
        COUNTRY: '/api/app/countries',
        ADDRESS: '/api/web/address'
      },
      DEV: {
        PROFILE: '/data/profile_company.json',
        VALIDATION: 'https://httpbin.org/post',
        COUNTRY: '/data/countries.json',
        ADDRESS: '/data/zip.json'
      }
    }
  
    return urls[store.getters.mode]
  }
  </code></pre>