TypeError: Vue.set is not a function

[sne11ius]

I created a new project with vue-cli, added vue-model dependency and want to try it out.

I have this:

import Vue from 'vue'
import VueModel from 'vue-model'

Vue.use(VueModel, {
  WatchEntry: {
    attributes: [
      'id',
      'url'
    ],
    http: {
      baseRoute: '/my/watches'
    }
  }
})

Now I want to load all models from the server:

methods: {
    loadData () {
      console.debug(this.$model('WatchEntry').index())
    }
  }

And I get:

TypeError: Vue.set is not a function
    at Errors.set (Errors.js?4eb3:23)
    at new Errors (Errors.js?4eb3:7)
    at Model.setData (Model.js?6d83:32)
    at new Model (Model.js?6d83:12)
    at VueModel.$model (VueModel.js?f341:38)
    at apply (lodash.js?3387:496)
    at wrapper (lodash.js?3387:5356)
    at VueComponent.eval [as $model] (VueModel.js?f341:171)
    at VueComponent.loadData (HelloWorld.vue?b703:39)
    at Proxy.boundFn (vue.esm.js?efeb:187)

Any ideas?

[sne11ius]

Also, I am currently using LarryBattle s fork, and this is a webpack project...

[cmrd-senya]

I have the same problem.

I guess it happens because you're using Vue.js bundled as ES2016 module -- I see vue.esm.js file in your backtrace.

The problem is that vue-model is trying to require vue.js using node.js require directive. However when vue is provided as ES2016 module, requiring it doesn't work this way anymore.

The only solution I came up with is to replace requires with ES2016 imports. This works for me, but it obviously breaks the compatibility with environments where ES2016 is not available. Unfortunately I don't know a better solution, otherwise I would provide a PR.

Here are my changes which made it work for me: https://github.com/cmrd-senya/vue-model/commit/5034e2a2394060c555a055068caa5920736027c0

If anyone suggests a proper solution I'll be able to test it and submit a PR.

[ghost]

Ran into this same problem today. I've been messing around with Vuex server-side and was using Vue.set in my mutations, and then started running the same mutations client-side and was like WHAT IS WRONG THESE ARE THE SAME.

I'm guessing it's just because I'm using Nuxt but I enabled Typescript? @cmrd-senya 's solution worked for me (using import/from syntax instead of require syntax)