el-transfer（穿梭框）一边数据为空时，尝试添加至另一边报错：Cannot read property '0' of null at patchBlockChildren (runtime-core.esm-bundler.js?5c40:3996)

↓

<el-transfer v-model="transferData.value" :props="{key:'id',label:'name',disabled:'status'}" :data="transferData.data" style="text-align: left; display: inline-block" filterable :titles="['未拥有菜单', '已拥有菜单']" :button-texts="['分配', '移除']" :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}" />
    
  data() {
    const loadTransferData = () => {
      const _this = this as any;
      const transferData = {
        data: [] as Array<any>,
        value: [1, 2, 3],
      };
      for (let i = 1; i <= 15; i++) {
        transferData.data.push({
          id: i,
          name: `备选项 ${i}`,
          status: i % 4 === 0,
        });
      }
      return transferData;
    };
    return {
      transferData: loadTransferData(),
    };
  },

问题描述：

在vue3.0版本下使用element-plus的el-transfer（穿梭框）组件，将右面板的所有数据移至左面板，

再将左面板某项移至右面版时，出现下面的错误：

Uncaught (in promise) TypeError: Cannot read property '0' of null
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:3996)
    ...

经过排查只有在左面板或者右面板上没有数据时才会出现此错误。

解决方法：

此错误产生为Vue的bug，目前Vue已经在3.0.5版本中进行了修复。

将Vue升级至最新版本：

npm install vue --save