Vue's vue.$set() method source code case detailed explanation

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exists.
 */
export function set (target: Array<any> | Object, key: any, val: any): any {
  // First, determine if the target object passed in is undefined, null, primitive (original value), or throw a warning if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // Check if the target object target is an array and key is a valid index if (Array.isArray(target) && isValidArrayIndex(key)) {
    // Take the larger value of the target array's length and key as the target's length attribute target.length = Math.max(target.length, key)
    //Replace the element at the key position through splice target.splice(key, 1, val)
    return val
  }
  // If key already exists in the target object, assign it directly if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // Get the observer object in target const ob = (target: any).__ob__
  // If target is a vue instance or $data returns directly if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  // If ob does not exist, it means that target is not a responsive object, and the value is assigned directly without triggering a view update if (!ob) {
    target[key] = val
    return val
  }
  // If ob exists, set key as the responsive property defineReactive(ob.value, key, val)
  // Send notification to trigger view update ob.dep.notify()
  return val
}