我有一个从后端获取数据的方法，并将我的data变量设置为来自后端的数据。我在onMounted vue方法中调用该方法。但当我在组件中显示数据时，它是空的，长度为0。奇怪的是，如果我对组件进行任何更改，数据显示正确，长度更改为正确的长度。
下面是我的代码：

<script setup>
 import SearchBar from '@/Components/Admin/SearchBar.vue';

 import {onMounted, reactive} from 'vue'

 import moment from 'moment'

 let data = [];
 
 onMounted(() => {

    getBreeders();

})

 const getBreeders = () => {

    axios.get(route('tagsmodal.breeders')).then(response=>{

        data = response.data;
        console.log(data);

    })
 }

其组分为：

{{ 'the length is '+data.length  }}

<div class="table-view" id="entityTableView">
<table class=" fullwidth">
    <thead>
       <tr>
            <th scope="col" data-attribute="title" class="orderable">Title</th>
            <th scope="col" data-attribute="postDate" class="ordered asc">Post Date</th>
        </tr>
    </thead>
    <tbody id="Tbody" >
        <tr v-for="(entity,index) in data" :key="entity.id" >
            <td> {{entity.name}} </td>
            <td> {{ moment(String( entity.created_at)).format('YYYY-MM-DD') }} </td>
        </tr>
    </tbody>

数据长度始终为零，并且在对组件进行某些更改之前不会显示任何数据