v-html レンダリング コンポーネントの問題

  <div ref="テスト">
    <one-component :title="title[0]" element="<el-radio v-model='radio' label='1'>代替オプション</el-radio>"> 
      <el-radio slot="component" v-model="radio" label="1">オプション</el-radio>
    </1 つのコンポーネント>
  </div>
</テンプレート>

<スクリプト>
'../components/oneComponent' から OneComponent をインポートします。
エクスポートデフォルト{
  名前： ''、
  データ（） {
    戻る {
        ラジオ: '2',
        タイトル: ['ラジオシングルチェックボックス']
    }
  },
  コンポーネント:{
    ワンコンポーネント
  },
 

}
</スクリプト>

<style lang="stylus" スコープ>
</スタイル>

  <div class="all">
    <el-form label-width="80px" label-position="left" :model="ruleForm" :rules="rules">
      <el-form-item label="シミュレートされた幅" prop="inputW">
        <el-input v-model="ruleForm.inputW" placeholder="幅を入力してください"></el-input>
      </el-form-item>
      <el-form-item label="シミュレーションの高さ" prop="inputH">
        <el-input v-model="ruleForm.inputH" placeholder="身長を入力してください"></el-input>
      </el-form-item>
    </el-form>
    <変数ボックス
      クラス="ボックス"
      :width="ruleForm.inputW"
      :height="ruleForm.inputH"
    </変数ボックス>
  </div>
</テンプレート>
<スクリプト>
「../components/Variablebox」からVariableboxをインポートします。
エクスポートデフォルト{
  名前： ""、
  データ（） {
    var checkSize = (ルール, 値, コールバック) => {
      console.log(値);
      （値 < 500 || 値 > 1000）の場合 {
        callback(new Error("500 から 1000 の間の数値が推奨されます"));
      } そうでない場合 (!Number.isInteger(Number(value))) {
        callback(new Error("数値を入力してください"));
      } それ以外 {
        折り返し電話（）;
      }
    };
    戻る {


      ルールフォーム: {
        入力W: 500,
        入力H: 500
      },

      ルール:
        inputW: [{ バリデータ: checkSize, トリガー: "blur" }],
        inputH: [{ バリデータ: checkSize, トリガー: "blur" }]
      }
    };
  },
  メソッド: {
  },
  コンポーネント:
    変数ボックス
  }
};
</スクリプト>
<style lang="stylus" スコープ>
。全て
  パディング: 0 20px
  ディスプレイ: フレックス
  フレックス方向: 列
</スタイル>

   新しいVue({
        // el: '#app'
        テンプレート: this.ele,
         データ：{
           ラジオ: '2'
        },
      }).$mount("#apps");