Vue.js and Immutable.js

Question

I'm working on a Vue.js application where I have to deal with deeply nested data structures (trees and forests).

After reading about using simple data structures, pure functions and reducing (non-local) mutation, I belief that embracing those ideas would increase the maintainability and simplicity of my code.

While implementing a tree manipulation module using nothing but pure functions, I learned two things:

• avoiding unintentional mutation of nested objects in JavaScript requires a lot of attention and discipline, especially with larger teams
• I don't like littering my code with cloneDeep() invocations

Yesterday, I stumbled upon Immutable.js, which looks great to me. After a bit of playing around with it, I feel like it makes my pure functions much easier to reason about.

My Vue.js components would use fromJS(treeNode) and treeNode.toJS() when interacting with the manipulation module.

My question: is it technically possible to Vue.js and Immutable.js together? What are things to keep in mind? Are people using this combination in production? I found this post, which seems to suggest the opposite. That's all I could find.

What are the caveats or practical downsides? Would you suggest to use Immutable.js or to keep deeply cloning regular objects?

edit: updated my question in response to the votes, to make it (less) opinion-based

Answer 1

Just reading about this myself, and apparently not: https://forum.vuejs.org/t/immutable-js-with-vue/6366