vue + elmentUI动态加载数据失败，未能正常前端显示，请大神指教！！！谢谢！！！

问题描述：

（一）、数据分为三部分：

（1）库表获取全部数据集合A（key：label的数组），

（2）库表获取Target数据集合B（只有A中的key值数组） ，

（3）Source显示Target中不存在的key对应的数据C（key：label的数组）；

（二）待解决问题：

Target数据已获取，即[a,b,c]，全部数据已获取，即[{a：AA}，{b:BB}，{c:CC}，{d:DD}，{e:EE}]，如何处理能将AA、BB、CC显示在Target框内，将DD、EE显示在Source；当点击“到左边”、“到右边”按钮时，数据能正常加载？

现存Js代码：

<template>
  <el-dialog
    title="权限"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <div style="text-align: center">
        <el-transfer
          style="text-align: left; display: inline-block"
          v-model="dataForm.value"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :titles="['Source', 'Target']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          @change="handleChange"
          :data="dataForm.source">
          <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
        </el-transfer>
        <div id = "target">
          {{this.dataForm.value}}
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>

<script>
  export default {
    data () {
      return {
        userId: '',
        visible: true,
        target: [], // 存储用户接口表查询的数据
        allsour: [], // 所有接口服务
        dataForm: {
          value: [],
          source: [] // 存储左选框剔除用户接口表<右选框>的ServiceID的数据作为备选项
        }
      }
    },
    methods: {
      init (id) {
        this.userId = id || 0
        // 获取第三方所有接口信息
        this.$http({
          url: 'http://127.0.0.1:9050/sysServeInfo/getPageList?rows=0&page=0',
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          // 第三方接口信息数据
          const services = data.data
          for (let i = 0; i < services.length; i++) {
            this.allsour.push({
              key: services[i].serviceIdstr,
              label: services[i].serviceName
            })
          }
          const allsour = this.allsour
          // 初始化右选框 取值于<用户接口表>
          this.$http({
            url: this.$http.adornUrl(`/sys/user/intfa/${this.userId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            for (let i = 0; i < data.length; i++) {
              for (let j = 0; j < allsour.length; j++) {
                if (data[i] === allsour[j].key) {
                  this.target.push({
                    key: allsour[j].key,
                    label: allsour[j].label
                  })
                }
              }
            }
            // target表示用户接口表查询的信息:key,label
            const target = this.target
            // Observer对象转数组
            const targetArr = JSON.parse(JSON.stringify(target))
            for (let i = 0; i < targetArr.length; i++) {
              // 将用户接口表的信息初始化至右选框
              this.dataForm.value.push(targetArr[i].key)
            }
            console.log(this.dataForm.value)
            // 初始化左选框 测试完成
            for (let m = 0; m < allsour.length; m++) {
              let flag = true
              for (let n = 0; n < target.length; n++) {
                if (allsour[m].key === target[n].key) {
                  flag = false
                  break
                }
              }
              if (flag) {
                this.dataForm.source.push({
                  key: allsour[m].key,
                  label: allsour[m].label
                })
              }
            }
          })
        })
      },
      handleChange (value, direction, movedKeys) {
        console.log(value, direction, movedKeys)
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/sys/user/auth`),
              method: 'post',
              data: this.$http.adornData({
                'user_id': this.userId,
                'intfac_ids': this.dataForm.value
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

请大神 指教，谢谢！