Vue.$set の失敗の落とし穴の発見と解決

    <el-form インライン>
      <el-form-item スタイル="margin-bottom: 20px;">
        <el-select v-model="data[props.prop]" @change="data[props.value] = ''">
          <el-オプション
            v-for="コントロール内の項目"
            :key="アイテムID"
            :value="アイテムID"
            :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item スタイル="margin-bottom: 20px;">
        <el-select v-model="データ[props.type]">
          <el-オプション
            v-for="条件内のアイテム"
            :key="アイテムコード"
            :value="アイテムコード"
            :label="アイテム名"
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item スタイル="margin-bottom: 20px;">
        <FormControl v-if="control" :control="control" :value="data[props.value]" @input="onValueChange" ></FormControl>
        <el-input v-else :value="data[props.value]" @input="onValueChange"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
      </el-form-item>
    </el-form>

{
  小道具:{
    小道具: {
      タイプ: オブジェクト、
      デフォルト: () => ({
        プロップ: 'プロップ',
        値: '値',
        タイプ: 'タイプ'
      })
    }
  },
  データ（）{
    戻る {
      データ：{
        
      }
    }
  },
  方法:{
    onValueChange(val){
      this.$set(this.data, this.props.value, val)
    }
  }
  //...
}

<el-select v-model="data[props.prop]" @change="data[props.value] = ''">

//vue/src/core/observer/index.js ソースコードスニペット/**
 * オブジェクトにプロパティを設定します。新しいプロパティを追加し、
 * プロパティが
 * すでに存在します。
 */
エクスポート関数セット (ターゲット: 配列<any> | オブジェクト、キー: any、値: any): any {
  (process.env.NODE_ENV !== 'production' && の場合
    (isUndef(ターゲット) || isPrimitive(ターゲット))
  ）{
    警告(`未定義、null、またはプリミティブ値にリアクティブ プロパティを設定できません: ${(target: any)}`)
  }
  Array.isArray(ターゲット) && isValidArrayIndex(キー) の場合 {
    ターゲットの長さ = Math.max(ターゲットの長さ、キー)
    ターゲット.splice(キー、1、値)
    戻り値
  }
  if (ターゲットのキー && !(Object.prototype のキー)) {
    ターゲット[キー] = 値
    戻り値
  }
  const ob = (ターゲット: 任意).__ob__
  target._isVue の場合、ob と ob.vmCount は次のように記述します。
    process.env.NODE_ENV !== 'production' && 警告(
      'Vue インスタンスまたはそのルート $data にリアクティブ プロパティを追加しないでください ' +
      「実行時 - データ オプションで事前に宣言します。」
    ）
    戻り値
  }
  もし (!ob) {
    ターゲット[キー] = 値
    戻り値
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  戻り値
}