vue 无法获取到template中的dom元素?

我希望能够获取<template #loadMore>中 id为"is_load"的div元素但是ref无法引用到 ,在onMounted函数中使用nextTick回调打印处理这个dom也是空的，等待渲染后也不行有什么方法可以操作到dom

 <a-list
          class="demo-loadmore-list"
          :loading="initLoading"
          item-layout="horizontal"
          :data-source="list"
          :locale="locale"
      >
        <template #loadMore>
          <div id="is_load" ref="test"
              v-if="!initLoading && !loading"
              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
          >
            <a-button @click="onLoadMore">加载更多</a-button>
          </div>
        </template>

        <!--     商品item信息-->
        <template #renderItem="{ item }">
          <a-card hoverable  class="custom-card">
            <template #cover>
              <img alt="example" :src="JSON.parse(item.imageUrl)[0]" class="item_image"/>
            </template>
            <a-card-meta :title="item.price+' 元'" style="text-align: center;">
              <template #description>{{ item.goodsName }}</template>
            </a-card-meta>
          </a-card>
        </template>
      </a-list>
<script lang="ts" setup>
import {onMounted, ref, nextTick} from 'vue';
const test=ref();
onMounted( () => {
      console.log(test.value)  //打印为空
  });
document.getElementById("is_load")  //也没有拿到这个元素
</script>

vue 无法获取到template中的dom元素?