[wensley]

It is possible to keep the data inside of a seperate class. I have an app where I needed to observe a few properties of a class but wanted to keep it completely standard js so it could be used outside of a Vue app. I created an object in Vue's data and referenced some of the class properties, it works fine and changes are reactive in both directions.

[plopz]

The issue is references, if you de-reference in the data function, you can now never change that reference because Vue's reactivity won't see the change.

    let external = {foo: {bar: 'something'};
    new Vue({
      data: function() {
        return {
          ref: external.foo.bar
        };
      }
    })
    external.foo = {bar: 'something else'};

[iovrthoughtthis]

This is fine if there is a 1-1 relationship between the data object and the components (though persistence becomes interesting to manage then). But if you have hierarchies with lists of data that often change this doesn’t work. Vue2 doesn’t track changes across array access or objects that didn’t exist when the heirarchy was built.

One big issue for me has been that your data layer needs to know about and use Vue, which seems unintuitive as Vue is a UI library.