Javascript vue模板转换组

当我有一个简单的列表时，我有了转换，现在我正在使用组件和模板，转换不再工作了。有人能解释为什么吗

我希望每个项目的动画，而它似乎做了所有的项目在一个过渡

我正在使用vue2.js

我的css

.flip-list-move {
  transition: transform 1s;
}

我的标记

      <div  >
<transition-group name="flip-list" tag="div" >

              <div v-for="item in accFilters" class="box"  v-bind:key="item"  >

                  <h1>{{ item.name }}</h1>
                  <img :src="item.imageUrl" style="width:200px;">
                  <p>{{item.extract}}</p>
                  {{ item.holidayType }}

                    <div is="task" v-for="avail in item.avail"   v-bind:item="avail"  >

                    </div>    


              </div>
       </transition-group>   

      </div>

    </template>

{{item.name}
{{item.extract}

{{item.holidayType}

它似乎在某种程度上起作用。所有项目都是动画的，而不是项目

我认为这是由于数据的方式，而-move

v-bind:key=“item”

可能是问题的原因。只能将基元值用作键：