How do I move focus with template refs in a v-for loop ( Vue 3 Composition API)?

I am using a button to show/hide more or fewer list items, and want to use a ref to focus on the first of the "more" items when the button is clicked (this would be the sixth item, or listItem[5]). In the vue Options API, this is relatively easy. But I cannot get it work with the Composition API. I see all of the refs listed for the component in vue devtools:

listItem:Array[12] (Ref)
0:<li>
1:<li>
2:<li>
3:<li>
4:<li>
5:<li>
6:<li>
7:<li>
8:<li>
9:<li>
10:<li>
11:<li>

When the button gets clicked, I get an error Uncaught TypeError: Cannot read properties of undefined (reading 'value'). I am relatively new to the Composition API, and it almost feels like a Catch-22, where I want to reference something that doesn't really exist yet. What am I missing here?

My code

<script setup>
import { ref } from 'vue'
const listItem = ref([])
const showAllCounties = ref(false)
const showhideItems = (index) => {
if (!showAllCounties.value) {
return index < 5
} else {
return true
}
}
const showFullList = () => {
document.activeElement.blur()
showAllCounties.value = !showAllCounties.value
if (listItem) {
console.log('yes') // returns 'yes'
console.dir(listItem) // shows proxy array with all 12 items
}
const target = listItem[5]
if (target) {
target.value.focus()
console.log('yes, ' +target)
} else {
console.log('no')
}
listItem[5].value.focus()
//also tried listItem.value[5].focus()
}
</script>
<template>
<ul>
<li
v-for="(county, index) in project.data.counties"
v-show="showhideItems(index)"
class="project-counties-list"
ref="listItem"
:key="county.id"
>
{{ county.county_name }}, {{ index }}
</li>
</ul>
<button type="button" @click="showFullList">{{ ButtonText }}</button>
</template>

I've also tried logging listItem and listItem.value[5] to the console in onMounted().

Here's the solution that took me forever to figure out. The big key was to use listItem.value[5] instead of not listItem[5].value. Lesson learned (I hope) about how to deal with ref arrays. I also needed nextTick() to get the focus moved -- plus I had forgotten to include the tabindex in my previous example. So:

<script setup>
import { ref, nextTick } from 'vue'
const listItem = ref([])
let showAllCounties = ref(false)
const showHideItems = (index) => {
return showAllCounties.value
? true
: index < 5
}
const showHideFullList = () => {
showAllCounties.value = !showAllCounties.value
nextTick(() => {
const target = listItem.value[5]
if (target) {
target.focus()
}
})
}
const showMoreButtonText = computed(() => {
return showAllCounties.value
? 'Show less'
: 'Show more'
})
</script>
<template>
<ul>
<li
v-for="(county, index) in project.data.counties"
v-show="showHideItems(index)"
:id="`li-${index}`"
class="project-counties-list"
ref="listItem"
:key="county.id"
:tabindex="index === 5 ? -1 : false"
>
{{ county.county_name }}
</li>
</ul>
<button
type="button"
class="toggle"
@click="showHideFullList"
>{{ showMoreButtonText }}
</button>
</template>