element的表格组件展示的data中嵌套了对象无法展示怎么办

使用element表格组件时，一般只需要展示数据源中的各个字段即可，但是最近遇到了一个需要展示的数据中有些是数据源中的对象中的元素，这个开始是scope.row.xxx.yyy形式写的，也可以正常使用，但突然有一天开始报错

TypeError: Cannot read property ‘goodsNo’ of null
at fn (eval at ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{“cacheDirectory”:“node_modules/.cache/vue-loader”,“cacheIdentifier”:“71db5a2d-vue-loader-template”}!./node_modules/_vue-loader@15.9.2@vue-loader/lib/loaders/templateLoader.js?!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?!./node_modules/_vue-loader@15.9.2@vue-loader/lib/index.js?!

为了解决这个突然出现的问题，找了很多方法尝试，最后找到了一种可以正常显示出数据的方法，但是还是感觉比较耗性能，只能等后续找到更好的方法之后再更改

原始写法

<el-table-column
  prop="xxx.yyy"
  label="姓名">
  <template slot-scope="scope">
    <span>{{ scope.row.xxx.yyy || '-' }}</span>
  </template>
</el-table-column>

更改之后

<el-table-column
  prop="xxx.yyy"
  label="姓名">
  <template slot-scope="scope">
    <span v-for="(item, keys) in scope.row.xxx" :key="item + scope.$index">{{ keys == 'yyy' ? (item || '-') : '' }}</span>
  </template>
</el-table-column>

数据源格式

数据源格式如下，此处只是简单举例，由于项目数据量很大，直接在获取数据之后对数据进行处理也很麻烦，所以还是采用了现在这个看着也不是很好但是至少能解决问题的办法

tableData: [
  {
    grade: 1,
    value: 2,
    xxx: {
      yyy: 1,
      zzz: 2
    }
  }
]