_.defaultsDeep() with Vue.set() - vue.js

Question

I need to set default values from model to component object in my vue.js application.
I found the perfect solution in lodash defaultsDeep defaultsDeep(this.widget, this.widgetModel), but the values don't get reactive obviously (added props not reactive), so I need something similar to _.defaultsDeep(), but with a callback to vm.$set() OR make all properties of object reactive after set defaults, OR even add defaultsDeepWith function to lodash
I looked to source code of defaultsDeep, but looks like i don't have enough experience to understand that, also i looked to vue-deepset librariy and seems it don't fit to my case (library better fit to stringed properties), also project based on vue.js 2

Answer 1

const defaultsDeepWithSet = (targetObj, sourceObj) => {
for (let prop in sourceObj) {
if (sourceObj.hasOwnProperty(prop)) {
if (!targetObj.hasOwnProperty(prop)) {
this.$set(targetObj, prop, sourceObj[prop])
}
if (isObject(sourceObj[prop])) {
defaultsDeepWithSet(targetObj[prop], sourceObj[prop])
}
}
}
}
defaultsDeepWithSet(this.widget, this.widgetModel)
Obama awards obama a medal meme

Answer 2

I've run into this same issue with _.defaultsDeep() and other similar utils. If this is a prominent issue and you don't want Vue to bleed into every corner of your codebase, then consider fixing reactivity after the fact.
I happen to be using Vue 2 Composition API, so it looks like this:
import { reactive, isReactive, isRaw } from '#vue/composition-api';
const fixReactivity = (obj) => {
// Done?
if (!obj) return obj;
if (typeof obj !== 'object') return obj;
// Force reactive
if (!isReactive(obj)) {
// See: https://github.com/vuejs/composition-api/blob/6247ba3a1e593b297321f68c1b7bb0dee2c3ea1e/src/reactivity/reactive.ts#L43
const canBeReactive = !(!(Object.prototype.toString.call(obj) === '[object Object]' || Array.isArray(obj)) || isRaw(obj) || !Object.isExtensible(obj));
if (canBeReactive) reactive(obj);
}
const isArray = Array.isArray(obj);
for (const key in obj) {
if (!obj.hasOwnProperty(key)) continue;
// Fix the children
const val = obj[key];
fixReactivity(val);
// Fix assignment for objects
if (!isArray) {
const prop = Object.getOwnPropertyDescriptor(obj, key);
const needsFix = ('value' in prop) && prop.writable;
if (needsFix) {
Vue.delete(obj, key);
Vue.set(obj, key, val);
}
}
}
return obj;
};