问题描述：
我想复用一个写好的公共组件

<template>
    <ul>        
      <li v-for="(item, index) in items" :key=index>
        <div>
          <h2>{{item.name}}</h2>
        </div>
      </li>
    </ul>
</template>

其中两个items的数据结构分别如下：

items1: [
  { name: 'a' },
  { name: 'b' },
  { name: 'c' }
]

items2: [
  { data: { name: 'a' } },
  { data: { name: 'b' } },
  { data: { name: 'c' } }
]

传items1时，获取name是：item.name，
传items2时，获取name是：item.data.name
除了数据结构略有不同外，其他内容一样，所以想复用这个组件

我的思路：
在这个组件中写两个ul ，然后用一个标识去控制显示的是item.name 还是item.data.name，但是又觉得这种方法太笨，跟重新写一个组件没啥区别。

请问： 有遇到这种情况的人吗，大家都是怎么解决的（不要说跟后台商量把数据结构改为一致。。。）