求助 , 如何在vue3.2中, 使用v-for循环reactive(对象数组)中的数组?

我使用了TS 和setup语法糖, 想在模板中使用v-for来循环一个响应式对象数组, 失败了!!! 我贴一段我失败的伪代码, 希望懂得朋友, 能给指点一下!!

<template>
    <!-- v-for 循环 对象数组 -->
  <div v-for="(animal, index) in animalList" :key="index">
    <section>{{ animal}}</section>
  </div>
</template>

<script setup lang="ts">
    // animal是我随手定义的类, 从外部引入的
    let animalList: Animal[] = []

    function getList(){
        返回由Animal对象构成的数组
    }

    // 在生命周期函数中调用getList方法, 获取Animal数组 并赋值给外部的animalList
    onBeforeMount(() => {
      let list: Article[] = getList()
        // 使用reactive函数, 使list变成响应式变量, 再赋值给animalList
      animalList= reactive(list)
    })
</script>