I cannot access DOM node in v-if and v-else statement in Vue 3 :((

[amIToan]

My code is something like this :
<div class="w-full relative overflow-hidden"> <template v-if="dbStore.playCate.processing"> <div class="w-full h-[60px] overflow-hidden"> <a-skeleton active :paragraph="{ rows: 1 }" /> </div> </template> <template v-else> <div id="template-filter" class="overflow-x-auto scrollbar-hide"> <div v-for="(filter, index) in arrangedFilters" :key="index" :class="[ { 'mb-2': index === 0 }, 'w-full flex gap-2 text-[#929293]', ]" > <button v-if=" index === 0 && dbStore.playCate[game${active}].length > 0 " :class="[ { 'text-[#fff] bg-[var(--primary)]': dbStore.selectedPlayCate === -1, }, 'whitespace-nowrap py-1 px-3 rounded-2xl text-[13px] font-normal border border-solid', ]" @click.prevent="handlePlayCateSelection(-1)" > 全部 </button> <button v-for="(item, idx) in filter" :key="idx" :class="[ { 'text-[#fff] bg-[var(--primary)]': dbStore.selectedPlayCate === item.templateId, }, 'whitespace-nowrap py-1 px-3 rounded-2xl text-[13px] font-normal border border-solid', ]" @click.prevent="handlePlayCateSelection(item.templateId)" > {{ item.playCateName }} </button> <button v-if="index === 1" class="px-1"></button> </div> </div> <button v-if="dbStore.playCate[game${active}].length >= 8" class="w-14 h-8 bg-[var(--color3)] flex items-center justify-center absolute -right-4 bottom-0" @click.prevent="handleShowAllPlayCate" > <div class="w-5"> <img :src="appIcon" class="w-full" /> </div> </button> </template> </div>
Here I want to access element through id"template-filter" in onMounted Hook, but I didn't work.
Could sb explain this to me ???