vue element select

<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="">
        <el-select v-model="value" placeholder="">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
        <el-select v-model="value" placeholder="">
          <el-option
            v-for="(item2, index) in options.items"
            :key="index"
            :label="item2.name"
            :value="item2.key"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      options: [
        {
          key: "shejiyuanze",
          name: "",
          items: [
            {
              key: "yizhi",
              name: ""
            },
            {
              key: "fankui",
              name: ""
            },
            {
              key: "xiaolv",
              name: ""
            }
          ]
        },
        {
          key: "daohang",
          name: "",
          items: [
            {
              key: "cexiangdaohang",
              name: ""
            },
            {
              key: "dingbudaohang",
              name: ""
            }
          ]
        },
        {
          key: "form",
          name: "",
          items: [
            {
              key: "radio",
              name: "Radio "
            },
            {
              key: "checkbox",
              name: "Checkbox "
            },
            {
              key: "input",
              name: "Input "
            }
          ]
        }
      ]
    };
  }
};
</script>

the expected result is shown in the following figure. When the first item is selected, the second selection box appears under the first item, and when the second item is selected, the second selection box appears the content of the second item