Invalid binding key index within transition-group

<transition-group class="carousel-inner" name="list-complete" tag="div">
        <div v-for="(show,index) in shows" class="item" :key="show.id">
          <img :src=""../static/images/"+show.img" :alt="show.id">
          <div class="list-inner">
            <h3>{{show.h}}</h3>
            

{{show.p}}

<div><a class="btn">{{show.a}}</a></div> </div> </div> </transition-group>

Why does key bind to show.id to animate (: key= "show.id")
bind to index but not animate (: key= "index")

Mar.14,2021

: key= "'my-name'+index" is fine

Why exactly take a look at the source code here in vue.js:

function processKey (el) {
var exp = getBindingAttr(el, 'key');
if (exp) {
  {
    if (el.tag === 'template') {
      warn$2(
        "<template> cannot be keyed. Place the key on real elements instead.",
        getRawBindingAttr(el, 'key')
      );
    }
    if (el.for) {
      var iterator = el.iterator2 || el.iterator1;
      var parent = el.parent;
      if (iterator && iterator === exp && parent && parent.tag === 'transition-group') {
        warn$2(
          "Do not use v-for index as key on <transition-group> children, " +
          "this is the same as not using keys.",
          getRawBindingAttr(el, 'key'),
          true /* tip */
        );
      }
    }
  }
  el.key = exp;
}
  }
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b8b7-2c296.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b8b7-2c296.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?