why are the components inside the <transition> in the development environment being rendered multiple times?

[chkhk]

This issue only occurs during development. When I edit the textarea on the page and then modify the code, an additional component appears on the page after the component updates. This is causing a lot of frustration during debugging. Did I make a mistake somewhere in my code? Please take a look and help me? Thx.
from translate

demo

App.vue

  <transition
    enter-active-class="animate__animated animate__slideInLeft"
    leave-active-class="animate__animated animate__fadeOutRight"
  >
    <HelloWorld v-if="show"></HelloWorld>
  </transition>

HelloWorld.vue

<template>
  <div id="random-choice" class="f-c-c">
    <textarea
      cols="30"
      rows="5"
      v-model="text"
      style="resize: vertical"
    ></textarea>
    <div class="box f-c">
      <div
        v-for="(i, index) in textArr"
        :key="index"
        ref="allStr"
        class="str-box"
      >
        {{ i }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const text = ref('');
const allStr = ref(null);

const textArr = computed(() => {
  if (text.value.match(/^\s*$/)) {
    return [];
  } else {
    return text.value.split(/[,，]/).filter((i) => !i.match(/^\s*$/));
  }
});
</script>

[chkhk]

I can't verify whether this problem can occur in the production environment, but it does have an impact on the development environment. I declared a template reference ref="allStr" | const allStr = ref(null); in the child component. Regardless of whether the reference is used or not, problems will occur. When it is reset before the component is unloaded, allStr .value = null;, there will be no problem. But why this should be done is unclear to me.