title: TypeError: Cannot read property 'rtl' of undefined
body: <p>I'm trying to build a vuejs (that uses vuetify 2.1.4) component library and import it into another application locally via npm link but I keep on getting multiple errors saying either </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'rtl' of undefined</p>
  </blockquote>
  
  <p>or </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'lang' of undefined</p>
  </blockquote>
  
  <p>Note. The basic component for testing called Test works as it doesn't include anything from Vuetify.</p>
  
  <p>Here's a screenshot </p>
  
  <p><a href="https://i.stack.imgur.com/mL8ml.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mL8ml.jpg" alt="enter image description here"></a></p>
  
  <h1>App1 (App that's being built)</h1>
  
  <p>index.js</p>
  
  <pre><code>import Agent from '@/components/Agent'
  import Test from '@/components/Test'
  
  const AgentLibrary = {
    install(Vue, options = {}) {
      Vue.component(Test.name, Test)
      Vue.component(Agent.name, Agent)
    }
  }
  
  export default AgentLibrary
  </code></pre>
  
  <p>Agent.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-container&gt;
      &lt;!-- Header --&gt;
      &lt;v-row&gt;
        &lt;v-col md="5" class="col-center-content"&gt;
          &lt;h2&gt;Agent Information&lt;/h2&gt;
        &lt;/v-col&gt;
  
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
  
        &lt;v-col md="3"&gt;
          &lt;v-btn text rounded&gt;Cancle&lt;/v-btn&gt;
          &lt;v-btn rounded&gt;Save&lt;/v-btn&gt;
        &lt;/v-col&gt;
      &lt;/v-row&gt;
  
      &lt;!-- Form --&gt;
      &lt;v-row&gt;
        &lt;v-col md="5"&gt;
          &lt;AvatarUploader /&gt;
        &lt;/v-col&gt;
  
        &lt;v-col md="7"&gt;
          &lt;v-row&gt;
            &lt;v-col md="6"&gt;
              &lt;v-select rounded placeholder="Agent Type" outlined&gt;&lt;/v-select&gt;
            &lt;/v-col&gt;
            &lt;v-col md="6"&gt;
              &lt;v-select rounded placeholder="No. Parents" outlined&gt;&lt;/v-select&gt;
            &lt;/v-col&gt;
            &lt;v-col md="12"&gt;
              &lt;v-text-field rounded placeholder="Licensekey" outlined disabled&gt;&lt;/v-text-field&gt;
            &lt;/v-col&gt;
          &lt;/v-row&gt;
        &lt;/v-col&gt;
      &lt;/v-row&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import AvatarUploader from "@/components/AvatarUploader";
  
  export default {
    name: "Agent",
    components: {
      AvatarUploader
    }
  };
  &lt;/script&gt;
  &lt;style lang="scss" scoped&gt;
  span {
    font-size: 20px;
    color: rgb(162 162 162);
  }
  .col-center-content {
    display: flex;
    justify-content: center;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>test.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;h1&gt;HELLO WORLD!&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      name: "Test",
      mounted() {
          console.log("HELLO WORLD!")
      }
  }
  &lt;/script&gt;
  &lt;style lang="scss" scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "AgentComponents",
    "main": "dist/AgentComponents.umd.js",
    "module": "dist/AgentComponents.esm.js",
    "unpkg": "dist/AgentComponents.min.js",
    "browser": {
      "./sfc": "src/components/Agent.vue"
    },
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "serve": "vue-cli-service serve",
      "lint": "vue-cli-service lint",
      "build": "vue-cli-service build",
      "build:plugin": "cross-env NODE_ENV=production NODE_OPTIONS='--max-old-space-size=8192' vue-cli-service build --target lib --inline-vue --name AgentComponents src/index.js"
    },
    "dependencies": {
      "core-js": "^2.6.5",
      "moment": "^2.24.0",
      "rollup": "^1.24.0",
      "vue": "^2.6.10",
      "vue-router": "^3.0.3",
      "vuetify": "^2.1.4",
      "vuex": "^3.0.1"
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "^3.12.0",
      "@vue/cli-plugin-eslint": "^3.12.0",
      "@vue/cli-service": "^3.12.0",
      "cross-env": "^5.2.0",
      "babel-eslint": "^10.0.1",
      "eslint": "^5.16.0",
      "eslint-plugin-vue": "^5.0.0",
      "rollup-plugin-buble": "^0.19.8",
      "rollup-plugin-commonjs": "^10.1.0",
      "rollup-plugin-vue": "^5.0.1",
      "sass": "^1.17.4",
      "sass-loader": "^7.1.0",
      "vue-cli-plugin-vuetify": "^1.0.2",
      "vue-template-compiler": "^2.6.10",
      "vuetify-loader": "^1.2.2"
    },
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "rules": {},
      "parserOptions": {
        "parser": "babel-eslint"
      }
    },
    "postcss": {
      "plugins": {
        "autoprefixer": {}
      }
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions"
    ]
  }
  </code></pre>
  
  <p>avataruploader.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-row&gt;
      &lt;v-col md="12" class="col-center-content"&gt;
        &lt;v-avatar size="230" color="rgb(232 239 244)"&gt;
          &lt;v-img aspect-ratio="1" width="200px" src="@/assets/user-alt.png"&gt;&lt;/v-img&gt;
        &lt;/v-avatar&gt;
      &lt;/v-col&gt;
  
      &lt;v-col md="12"&gt;
        &lt;v-file-input
          ref="file"
          accept="image/png, image/jpeg, image/bmp"
          placeholder="Pick a logo"
          label="Your photo or company logo"
        &gt;&lt;/v-file-input&gt;
      &lt;/v-col&gt;
    &lt;/v-row&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: "AvatarUploader"
  };
  &lt;/script&gt;
  &lt;style lang="scss" scoped&gt;
  span {
    font-size: 20px;
    color: rgb(162 162 162);
  }
  .col-center-content {
    display: flex;
    justify-content: center;
  }
  &lt;/style&gt;
  </code></pre>
  
  <h1>App2 (App that is importing App1)</h1>
  
  <p>main.js</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  
  Vue.config.productionTip = false
  
  import vuetify from './plugins/vuetify';
  
  import "AgentComponents"
  
  console.log(AgentComponents.default)
  
  Vue.use(AgentComponents.default)
  
  new Vue({
       vuetify,
    render: h =&gt; h(App)
  }).$mount('#app')
  </code></pre>
  
  <p>app.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app&gt;
        &lt;Agent/&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: 'App',
    components: {
    },
    data: () =&gt; ({
      //
    }),
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>plugins/vuetify.js</p>
  
  <pre><code>import Vue from 'vue';
  import Vuetify from 'vuetify/lib';
  
  Vue.use(Vuetify);
  
  export default new Vuetify({
    icons: {
      iconfont: 'mdi',
    },
  });
  </code></pre>
  
  <p>I expected to see my Agent component in App1 displayed and working as usual (running npm run serve) when built and imported into App2 without any errors.</p>
  
  <p>Errors being displayed in my chrome browser can be seen bellow:
  I see multiple of the errors shown bellow in the Chrome console when running</p>
  
  <pre><code>TypeError: Cannot read property 'rtl' of undefined
      at VueComponent.labelPosition (AgentComponents.umd.js?7204:17243)
      at Watcher.get (AgentComponents.umd.js?7204:5517)
      at Watcher.evaluate (AgentComponents.umd.js?7204:5626)
      at VueComponent.computedGetter [as labelPosition] (AgentComponents.umd.js?7204:5791)
      at VueComponent.genLabel (AgentComponents.umd.js?7204:17422)
      at VueComponent.genTextFieldSlot (AgentComponents.umd.js?7204:17541)
      at VueComponent.genDefaultSlot (AgentComponents.umd.js?7204:17422)
      at VueComponent.genInputSlot (AgentComponents.umd.js?7204:16327)
      at VueComponent.genInputSlot (AgentComponents.umd.js?7204:17422)
      at VueComponent.genControl (AgentComponents.umd.js?7204:16290)
  </code></pre>
  
  <pre><code>TypeError: Cannot read property 'lang' of undefined
      at VueComponent.listData (AgentComponents.umd.js?7204:22317)
      at Watcher.get (AgentComponents.umd.js?7204:5517)
      at Watcher.evaluate (AgentComponents.umd.js?7204:5626)
      at VueComponent.computedGetter [as listData] (AgentComponents.umd.js?7204:5791)
      at VueComponent.staticList (AgentComponents.umd.js?7204:22317)
      at Watcher.get (AgentComponents.umd.js?7204:5517)
      at Watcher.evaluate (AgentComponents.umd.js?7204:5626)
      at VueComponent.computedGetter [as staticList] (AgentComponents.umd.js?7204:5791)
      at VueComponent.genList (AgentComponents.umd.js?7204:22596)
      at VueComponent.genMenu (AgentComponents.umd.js?7204:22624)
  </code></pre>