How to use lodash.set with Vue.$set?

Question

Vue.js

There is a problem: Vue.$set(obj, prop, value) incorrectly handles props like 'prop.subprop', but lodash.set() handles it perfectly, but lodash's set() does not set reactivity.

How can we solve this problem without reinventing the wheel that lodash already has?

Answer 1

Solved the problem like this:

import set from 'lodash/set'

const prop = 'prop.subprop'
const rootProp = prop.split('.')[0]
const nonReactiveObject = set(this.reactiveObject, prop, value)

this.$set(this.reactiveObject, rootProp, nonReactiveObject[rootProp])