Transition-group children must be keyed...but they are keyed

You have to give a unique key to your <div class="instruments"> element since elements inside a <transition-group>, specifically the immediate children, are always required to have a unique key attribute.

If you don't want to give a key to .instruments, you can remove that element and assign a tag and class attributes to <transition-group> instead since it renders an actual element which by default is a <span>.

<transition-group name="fade" tag="div" class="instruments">

In this way, the warning would not appear anymore since the immediate children (.instrument) have their unique keys assigned to them.

In some common cases.

You should check to see if there are any elements remain except all elements in for loop.

You may have an incorrect structure like this:

<transition-group name="fade">
  <div v-for="item in listItem" :key="item.id">
  </div>
  <n-button>Load more...</n-button>
</transition-group>

n-button is the cause. Should move n-button out side transition-group