Javascript 转换组vue中的转换效果在列表项的值更改时生效

是否有任何方法可以在转换组项中产生转换效果，以便在列表项中的值更改时产生转换效果？ 下面是示例代码，我希望在item.status发生更改时，span标记具有转换效果。下面是示例代码

   <div id="list-demo">
    <transition-group name="list" tag="p">
      <div
        v-for="(item,index) in items"
        v-bind:key="index"
        class="list-item"
        @click="changeStatus(item)"
      >
        Click Me
        <span v-if="item.status==='loading'">Loading...</span>
        <span v-if="item.status==='done'">Done...</span>
      </div>
    </transition-group>
  </div>

风格

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}