同一个页面使用两个el-tree数据污染的问题

在同一个界面使用两个tree，数据不一样

   <el-select
       placeholder="请选择"
         v-model="foregroundCategoryquery"
         @change="changeCategory"
       >
         <el-option :label="'后台类目'" :value="false"> </el-option>
         <el-option :label="'前台类目'" :value="true"> </el-option>

   </el-select>
  <el-tree
          class="tree"
          ref="treeX"
          v-if="!foregroundCategoryquery"
          :show-checkbox="changeMultiple"
          :data="classificationTree"
          v-loading="treeLoading"
          @node-click="handleNodeClick"
          @check="checkChange"
          node-key="backgroundCategoryId"
          :props="{
            label: 'name',
            children: 'children',
          }"
        > 
      </el-tree>
        <el-tree
          class="tree"
          ref="treeY"
          v-if="foregroundCategoryquery"
          :show-checkbox="changeMultiple"
          :data="fontClassificationTree"
          v-loading="treeLoading"
          node-key="foregroundCategoryId"
          :props="{
            label: 'name',
            children: 'children',
          }"
        >
   </el-tree>

切换的时候需要改变key，不然数据会被污染，导致两个数绑定的key都是同一个，点击展开会报错

 changeCategory (value) {
      if (value) {
      // 获取前台类目数据
        this.getFontTreeList()
        this.$nextTick(() => {
          this.$refs.treeY.store.key = 'foregroundCategoryId'
        })
      } else {
     // 获取后台类目数据
        this.getTreeList()
        this.$nextTick(() => {
          this.$refs.treeX.store.key = 'backgroundCategoryId'
        })
      }
    },