diff --git a/sandbox/components/SampleSpecSelector.vue b/sandbox/components/SampleSpecSelector.vue
index 16ff5ba80..18f802912 100644
--- a/sandbox/components/SampleSpecSelector.vue
+++ b/sandbox/components/SampleSpecSelector.vue
@@ -45,7 +45,7 @@
     </select>
 
     <button
-      ref="dropZoneRef"
+      ref="dropZone"
       class="dropzone"
       @click="dropzoneClick()"
     >
@@ -53,7 +53,7 @@
     </button>
 
     <input
-      ref="fileInputRef"
+      ref="fileInput"
       style="position: absolute; visibility: hidden;"
       type="file"
       @change="finputChange"
@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, useTemplateRef } from 'vue'
 import type { PropType } from 'vue'
 import { useDropZone } from '@vueuse/core'
 
@@ -83,8 +83,8 @@ const emit = defineEmits<{
 }>()
 
 const specSelector = ref<HTMLSelectElement | null>(null)
-const dropZoneRef = ref<HTMLDivElement>()
-const fileInputRef = ref<HTMLInputElement>()
+const dropZoneRef = useTemplateRef('dropZone')
+const fileInputRef = useTemplateRef('fileInput')
 const savedSpec = ref()
 
 const fName = ref<string>('Drop your own spec file')
diff --git a/src/components/SpecRenderer.vue b/src/components/SpecRenderer.vue
index e5e84d07a..b88771df0 100644
--- a/src/components/SpecRenderer.vue
+++ b/src/components/SpecRenderer.vue
@@ -10,7 +10,6 @@
       >
         <SpecRendererToc
           v-if="slideoutTocVisible"
-          ref="specRendererSlideoutTocRef"
           :base-path="basePath"
           class="spec-renderer-toc"
           :control-address-bar="controlAddressBar"
@@ -25,7 +24,6 @@
       <aside>
         <SpecRendererToc
           v-if="tableOfContents && !slideoutTocVisible"
-          ref="specRendererTocRef"
           :base-path="basePath"
           class="spec-renderer-toc"
           :control-address-bar="controlAddressBar"
diff --git a/src/components/common/CopyButton.vue b/src/components/common/CopyButton.vue
index a6548b027..68a66dcab 100644
--- a/src/components/common/CopyButton.vue
+++ b/src/components/common/CopyButton.vue
@@ -1,6 +1,5 @@
 <template>
   <button
-    ref="copyButton"
     class="copy-button"
     :title="copied ? 'Copied!' : 'Copy'"
     @click.stop="copyCode"
@@ -14,7 +13,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { CopyIcon, CheckIcon } from '@kong/icons'
 import { useClipboard } from '@vueuse/core'
 
@@ -33,7 +31,6 @@ const props = defineProps({
   },
 })
 
-const copyButton = ref<HTMLButtonElement>()
 const { copy, copied } = useClipboard({ source: props.content, legacy: true })
 
 async function copyCode(): Promise<void> {
diff --git a/src/components/common/EditableCodeBlock.vue b/src/components/common/EditableCodeBlock.vue
index 72f974a0c..631f2cd1c 100644
--- a/src/components/common/EditableCodeBlock.vue
+++ b/src/components/common/EditableCodeBlock.vue
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 
-import { ref, watch } from 'vue'
+import { ref, useTemplateRef, watch } from 'vue'
 import CodeBlock from './CodeBlock.vue'
 import { CODE_INDENT_SPACES } from '@/constants'
 
@@ -59,7 +59,7 @@ const formatCode = (codeToFormat: string, codeLang: string): string => {
 }
 
 // ref to contentEditable element
-const editableInput = ref<HTMLDivElement | null>()
+const editableInputRef = useTemplateRef('editableInput')
 
 // to hold editable code content
 const editableCode = ref<string>(formatCode(props.code, props.lang))
@@ -77,7 +77,7 @@ const cursorPosition = ref<number>(0)
  * @param eol  (boolean, when true cursor is set to the end of the line)
  */
 const setCursorPosition = (customPosition: number, eol: boolean) => {
-  if (typeof window === 'undefined' || !editableInput.value || !editableInput.value.childNodes[0]) {
+  if (typeof window === 'undefined' || !editableInputRef.value || !editableInputRef.value.childNodes[0]) {
     return
   }
   // select text from a window
@@ -87,24 +87,24 @@ const setCursorPosition = (customPosition: number, eol: boolean) => {
   const selectedRange = document.createRange()
   let rangeNode = 0
   let rangePos = customPosition
-  for (let i = 0; i < editableInput.value.childNodes.length; i++) {
-    const contentLen = (editableInput.value.childNodes[i]?.textContent || '').length
+  for (let i = 0; i < editableInputRef.value.childNodes.length; i++) {
+    const contentLen = (editableInputRef.value.childNodes[i]?.textContent || '').length
     if (rangePos - contentLen <= 0) {
       break
     }
     rangeNode++
     rangePos -= contentLen
-    if (editableInput.value.childNodes[i]?.nodeName === 'BR') {
+    if (editableInputRef.value.childNodes[i]?.nodeName === 'BR') {
       rangePos--
     }
   }
 
-  if (!editableInput.value.childNodes[rangeNode]) return
+  if (!editableInputRef.value.childNodes[rangeNode]) return
 
   if (eol) {
-    rangePos = editableInput.value.childNodes[rangeNode].textContent?.length || 0
+    rangePos = editableInputRef.value.childNodes[rangeNode].textContent?.length || 0
   }
-  selectedRange.setStart(editableInput.value.childNodes[rangeNode], rangePos)
+  selectedRange.setStart(editableInputRef.value.childNodes[rangeNode], rangePos)
   // collapse the range at boundaries
   selectedRange.collapse(true)
 
@@ -115,7 +115,7 @@ const setCursorPosition = (customPosition: number, eol: boolean) => {
   selection?.addRange(selectedRange)
 
   // focus the cursor
-  editableInput.value.focus()
+  editableInputRef.value.focus()
 }
 
 
@@ -124,19 +124,19 @@ const setCursorPosition = (customPosition: number, eol: boolean) => {
  * get cursor position
  */
 const getCursorPosition = () => {
-  if (typeof window === 'undefined' || !editableInput.value) {
+  if (typeof window === 'undefined' || !editableInputRef.value) {
     return 0
   }
   const selection = window.getSelection()
   if (!selection) {
     return 0
   }
-  const currentArray = editableInput.value.innerText.split('')
+  const currentArray = editableInputRef.value.innerText.split('')
 
   const range = selection.rangeCount > 0 ? selection?.getRangeAt(0) : null
   if (range) {
     const clonedRange = range?.cloneRange()
-    clonedRange?.selectNodeContents(editableInput.value)
+    clonedRange?.selectNodeContents(editableInputRef.value)
     clonedRange?.setEnd(range.endContainer, range?.endOffset)
 
     // here we have a string but no \n -s , so we would need to count number of \n  in this fragment
@@ -202,8 +202,8 @@ const handleInput = (e: Event) => {
           // inject indentations
 
           cText = cText.substring(0, cursorPosition.value) + Array(paddings + 1).join(' ') + cText.substring(cursorPosition.value)
-          if (editableInput.value) {
-            editableInput.value.innerText = cText
+          if (editableInputRef.value) {
+            editableInputRef.value.innerText = cText
           }
           // force presented code to the resulting one
           presentedCode.value = cText
@@ -242,15 +242,15 @@ const handleFocusOut = (e: Event) => {
   const cText = (e.target as HTMLElement).innerText
   let resText = formatCode(cText, props.lang)
   editableCode.value = resText
-  if (editableInput.value) {
-    editableInput.value.innerText = editableCode.value
+  if (editableInputRef.value) {
+    editableInputRef.value.innerText = editableCode.value
   }
   presentedCode.value = resText
   emit('request-body-changed', resText)
 }
 
 
-watch(() => ({ code: props.code, lang: props.lang, editableInput: editableInput.value }),
+watch(() => ({ code: props.code, lang: props.lang, editableInput: editableInputRef.value }),
   ({ code: newCode, lang: newLang, editableInput: newEditableInput }) => {
     if (newCode !== newEditableInput?.innerText) {
       editableCode.value = formatCode(newCode, newLang)
diff --git a/src/components/common/HeadlessPopover.vue b/src/components/common/HeadlessPopover.vue
index 31f3c1820..09acc29f6 100644
--- a/src/components/common/HeadlessPopover.vue
+++ b/src/components/common/HeadlessPopover.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    ref="popoverWrapperRef"
+    ref="popoverWrapper"
     class="popover"
     data-testid="popover"
     v-bind="sanitizedAttrs"
   >
     <div
-      ref="triggerWrapperRef"
+      ref="triggerWrapper"
       class="popover-trigger-wrapper"
     >
       <slot />
@@ -38,11 +38,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed, watch, useAttrs } from 'vue'
+import { ref, onMounted, computed, watch, useAttrs, useTemplateRef } from 'vue'
 import type { PropType } from 'vue'
 import { useFloating, autoUpdate, offset, flip } from '@floating-ui/vue'
 import type { Placement } from '@floating-ui/vue'
 import { PopoverPlacementVariants } from '@/types'
+import { useEventListener } from '@vueuse/core'
 
 defineOptions({
   inheritAttrs: false,
@@ -109,8 +110,8 @@ const sanitizedAttrs = computed(() => {
   return strippedAttrs
 })
 
-const popoverWrapperRef = ref<HTMLElement | null>(null)
-const triggerWrapperRef = ref<HTMLElement | null>(null)
+const popoverWrapperRef = useTemplateRef('popoverWrapper')
+const triggerWrapperRef = useTemplateRef('triggerWrapper')
 const popoverRef = ref<HTMLElement | null>(null)
 const isVisible = ref<boolean>(false)
 
@@ -186,40 +187,20 @@ onMounted(() => {
   if (document) {
     // handle various click events to determine how to handle the click event in a generic clickHandler function
     // we don't set any other click event listeners on purpose to avoid conflict of event listeners
-    document?.addEventListener('click', clickHandler)
+    useEventListener(document, 'click', clickHandler)
 
     if (popoverTrigger.value && props.openOnMouseover) {
-      popoverTrigger.value.addEventListener('mouseenter', showPopover)
-      popoverTrigger.value.addEventListener('focus', showPopover)
-      popoverTrigger.value.addEventListener('mouseleave', hidePopover)
-      popoverTrigger.value.addEventListener('blur', hidePopover)
+      useEventListener(popoverTrigger.value, 'mouseenter', showPopover)
+      useEventListener(popoverTrigger.value, 'focus', showPopover)
+      useEventListener(popoverTrigger.value, 'mouseleave', hidePopover)
+      useEventListener(popoverTrigger.value, 'blur', hidePopover)
     }
 
     if (popoverRef.value && props.openOnMouseover) {
-      popoverRef.value.addEventListener('mouseenter', showPopover)
-      popoverRef.value.addEventListener('focusin', showPopover)
-      popoverRef.value.addEventListener('mouseleave', hidePopover)
-      popoverRef.value.addEventListener('focusout', hidePopover)
-    }
-  }
-})
-
-onBeforeUnmount(() => {
-  if (document) {
-    document?.removeEventListener('click', clickHandler)
-
-    if (popoverTrigger.value && props.openOnMouseover) {
-      popoverTrigger.value.removeEventListener('mouseenter', showPopover)
-      popoverTrigger.value.removeEventListener('focus', showPopover)
-      popoverTrigger.value.removeEventListener('mouseleave', hidePopover)
-      popoverTrigger.value.removeEventListener('blur', hidePopover)
-    }
-
-    if (popoverRef.value && props.openOnMouseover) {
-      popoverRef.value.removeEventListener('mouseenter', showPopover)
-      popoverRef.value.removeEventListener('focusin', showPopover)
-      popoverRef.value.removeEventListener('mouseleave', hidePopover)
-      popoverRef.value.removeEventListener('focusout', hidePopover)
+      useEventListener(popoverRef.value, 'mouseenter', showPopover)
+      useEventListener(popoverRef.value, 'focusin', showPopover)
+      useEventListener(popoverRef.value, 'mouseleave', hidePopover)
+      useEventListener(popoverRef.value, 'focusout', hidePopover)
     }
   }
 })
diff --git a/src/components/common/SelectDropdown.vue b/src/components/common/SelectDropdown.vue
index a9a02c90b..ff3e1d592 100644
--- a/src/components/common/SelectDropdown.vue
+++ b/src/components/common/SelectDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <Popover
-    ref="selectPopoverRef"
+    ref="selectPopover"
     :aria-activedescendant="selectedItem ? `${selectedItem.key ? selectedItem.key : selectedItem.value}-item` : undefined"
     :aria-labelledby="attrs.id ? String(attrs.id) : undefined"
     class="select-dropdown"
@@ -77,7 +77,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-import { computed, useAttrs, watch } from 'vue'
+import { computed, useAttrs, useTemplateRef, watch } from 'vue'
 import type { PropType } from 'vue'
 import Popover from './HeadlessPopover.vue'
 import { ChevronDownIcon } from '@kong/icons'
@@ -129,7 +129,7 @@ const sanitizedAttrs = computed(() => {
 
 const selectValue = defineModel<string>({ default: '' })
 
-const selectPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
+const selectPopoverRef = useTemplateRef('selectPopover')
 
 const selectItem = (value: string) => {
   selectValue.value = value
diff --git a/src/components/common/SlideOut.vue b/src/components/common/SlideOut.vue
index 4c064cf1c..fb90355b9 100644
--- a/src/components/common/SlideOut.vue
+++ b/src/components/common/SlideOut.vue
@@ -14,7 +14,6 @@
       <Transition name="spec-renderer-slide-in">
         <div
           v-show="visible"
-          ref="slideoutContainerRef"
           class="slideout-container"
           data-testid="slideout-container"
         >
@@ -80,8 +79,6 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-const slideoutContainerRef = ref<HTMLElement | null>(null)
-
 const handleClose = (e: any): void => {
   // close on escape key
   if ((props.visible && e.keyCode === 27)) {
diff --git a/src/components/common/ToggleSwitch.vue b/src/components/common/ToggleSwitch.vue
index 4a14933ab..0e78ca90e 100644
--- a/src/components/common/ToggleSwitch.vue
+++ b/src/components/common/ToggleSwitch.vue
@@ -5,7 +5,7 @@
     v-bind="sanitizedAttrs"
   >
     <input
-      ref="switchInputRef"
+      ref="switchInput"
       hidden
       tabindex="-1"
       type="checkbox"
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, useAttrs, computed } from 'vue'
+import { ref, useAttrs, computed, useTemplateRef } from 'vue'
 import InputLabel from '@/components/common/InputLabel.vue'
 
 defineOptions({
@@ -97,7 +97,7 @@ const switchControlElAttrs = computed((): Record<string, any> => {
 
 const toggleValue = defineModel<boolean>({ required: true })
 
-const switchInputRef = ref<HTMLInputElement | null>(null)
+const switchInputRef = useTemplateRef('switchInput')
 
 const propagateInputEvent = (event: Event): void => {
   if (props.disabled) {
diff --git a/src/components/spec-document/SpecDocument.vue b/src/components/spec-document/SpecDocument.vue
index 56efebc50..e2b5cfcc6 100644
--- a/src/components/spec-document/SpecDocument.vue
+++ b/src/components/spec-document/SpecDocument.vue
@@ -20,7 +20,7 @@
   </div>
   <div
     v-else-if="serviceNode"
-    ref="wrapperRef"
+    ref="wrapper"
     class="nodes-wrapper"
     :class="{ 'reset-margin': markdownStyles }"
   >
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { watch, ref, provide, computed, nextTick, onBeforeMount } from 'vue'
+import { watch, ref, provide, computed, nextTick, onBeforeMount, useTemplateRef } from 'vue'
 import { useMagicKeys, useWindowScroll, useWindowSize, useElementSize, useScroll, until, whenever } from '@vueuse/core'
 import composables from '@/composables'
 import type { PropType, ComputedRef } from 'vue'
@@ -226,7 +226,7 @@ const toRenderer = ref<Array<'true' | 'false' | 'forced'>>([])
 const lastY = ref<number>()
 const processScrolling = ref<boolean>(false)
 const lastPath = ref<string>()
-const wrapperRef = ref<HTMLElement | null>(null)
+const wrapperRef = useTemplateRef('wrapper')
 const renderPlain = ref<boolean>(false)
 
 const specDocument = computed((): ServiceNode => {
diff --git a/src/components/spec-document/endpoint/CollapsibleSection.vue b/src/components/spec-document/endpoint/CollapsibleSection.vue
index d54ca7c3e..8c0859a1a 100644
--- a/src/components/spec-document/endpoint/CollapsibleSection.vue
+++ b/src/components/spec-document/endpoint/CollapsibleSection.vue
@@ -6,7 +6,7 @@
   >
     <summary
       class="endpoint-collapsible-section-header"
-      @click="expanded = !expanded"
+      @click="toggleState"
     >
       <slot name="title">
         <h3 v-if="title">
@@ -16,7 +16,7 @@
       <ChevronRightIcon
         class="chevron-icon"
         :class="{ 'expanded': expanded }"
-        :size="16"
+        :size="KUI_ICON_SIZE_30"
       />
     </summary>
     <div
@@ -31,6 +31,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ChevronRightIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 
 defineProps({
   borderVisible: {
@@ -42,7 +43,14 @@ defineProps({
     default: '',
   },
 })
-const expanded = ref(true)
+
+const expanded = ref<boolean>(true)
+
+const toggleState = (e: Event) => {
+  if (!(e.target as HTMLElement).dataset.selectDropdownTrigger) {
+    expanded.value = !expanded.value
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/spec-document/overview/OverviewCollapsiblePanel.vue b/src/components/spec-document/overview/OverviewCollapsiblePanel.vue
index c556c1c57..986c8fee3 100644
--- a/src/components/spec-document/overview/OverviewCollapsiblePanel.vue
+++ b/src/components/spec-document/overview/OverviewCollapsiblePanel.vue
@@ -1,8 +1,5 @@
 <template>
-  <details
-    ref="overviewCollapsiblePanelDetail"
-    class="overview-collapsible-panel"
-  >
+  <details class="overview-collapsible-panel">
     <summary
       class="overview-collapsible-panel-header"
       @click="expanded = !expanded"
diff --git a/src/components/spec-document/schema-model/ModelProperty.vue b/src/components/spec-document/schema-model/ModelProperty.vue
index d52d04b5c..4a41be8b1 100644
--- a/src/components/spec-document/schema-model/ModelProperty.vue
+++ b/src/components/spec-document/schema-model/ModelProperty.vue
@@ -1,8 +1,8 @@
 <template>
   <div
     :id="propertyId"
-    ref="model-property"
-    class="model-property"
+    ref="modelProperty"
+    class="modelProperty"
     :data-testid="dataTestId"
   >
     <PropertyFieldList
@@ -30,7 +30,7 @@
 
     <details
       v-else-if="nestedPropertiesPresent"
-      ref="nested-fields"
+      ref="nestedFields"
     >
       <summary
         class="nested-fields-summary"
@@ -100,8 +100,8 @@ const maxExpandedDepth = inject<Ref<number>>('max-expanded-depth', ref(DEFAULT_E
 
 const nestedPropertiesExpanded = ref(props.depth < maxExpandedDepth.value)
 
-const currentElement = useTemplateRef('model-property')
-const nestedFieldsDetails = useTemplateRef('nested-fields')
+const currentElement = useTemplateRef('modelProperty')
+const nestedFieldsDetails = useTemplateRef('nestedFields')
 
 const dataTestId = computed(() => `model-property-${kebabCase(props.propertyName)}`)
 const propertyId = computed(() => props.basePathId ? kebabCase(`${props.basePathId}-${props.propertyName}`) : undefined)
diff --git a/src/components/spec-document/try-it/TryIt.vue b/src/components/spec-document/try-it/TryIt.vue
index 04ae84f11..161669ecf 100644
--- a/src/components/spec-document/try-it/TryIt.vue
+++ b/src/components/spec-document/try-it/TryIt.vue
@@ -30,7 +30,7 @@
       class="tryit-body"
     >
       <TryItAuth
-        ref="auth2ComponentTemplateRef"
+        ref="auth2ComponentTemplate"
         :data="data"
         @security-scheme-changed="securitySchemeChanged"
       />
@@ -110,7 +110,7 @@ const props = defineProps({
 
 })
 
-const authComponentRef = useTemplateRef('auth2ComponentTemplateRef')
+const authComponentRef = useTemplateRef('auth2ComponentTemplate')
 
 const excludeNotRequired = defineModel({
   type: Boolean,
diff --git a/src/components/spec-document/try-it/TryItAuth.vue b/src/components/spec-document/try-it/TryItAuth.vue
index 7e2948c0a..f38ccf7c3 100644
--- a/src/components/spec-document/try-it/TryItAuth.vue
+++ b/src/components/spec-document/try-it/TryItAuth.vue
@@ -104,7 +104,7 @@
 
       <TryItAuth2
         v-else-if="scheme.type === 'oauth2' && scheme.flows.clientCredentials"
-        ref="auth2ComponentTemplateRef"
+        ref="auth2ComponentTemplate"
         :data-id="data.id"
         :scheme="scheme"
         :scheme-key="key"
@@ -161,7 +161,7 @@ const props = defineProps({
   },
 })
 
-const auth2ComponentRef = useTemplateRef<Array<InstanceType<typeof TryItAuth2>>>('auth2ComponentTemplateRef')
+const auth2ComponentRef = useTemplateRef<Array<InstanceType<typeof TryItAuth2>>>('auth2ComponentTemplate')
 
 const auth2ClientCredentialsAuth = async (): Promise<Response | undefined> => {
   if (!auth2ComponentRef.value?.[0].auth2ClientCredentialsAuth) {
diff --git a/src/components/spec-renderer-toc/GroupItem.vue b/src/components/spec-renderer-toc/GroupItem.vue
index ef192a201..b9d6e9b4f 100644
--- a/src/components/spec-renderer-toc/GroupItem.vue
+++ b/src/components/spec-renderer-toc/GroupItem.vue
@@ -6,7 +6,7 @@
   >
     <button
       v-if="!item.hideTitle"
-      ref="collapseTriggerRef"
+      ref="collapseTrigger"
       :aria-controls="collapseGroupId"
       :aria-expanded="isExpanded"
       data-testid="group-item-button"
@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, useTemplateRef, watch } from 'vue'
 import type { PropType } from 'vue'
 import type { TableOfContentsGroup } from '@/stoplight/elements-core'
 import { itemComponent, isGroup } from './index'
@@ -79,7 +79,7 @@ const selectItem = (id: any) => {
 }
 
 const isExpanded = ref<boolean>(props.item.hideTitle || props.item.initiallyExpanded)
-const collapseTriggerRef = ref<HTMLElement | null>(null)
+const collapseTriggerRef = useTemplateRef('collapseTrigger')
 
 
 const onClick = (event: Event) => {
diff --git a/src/components/spec-renderer-toc/SpecRendererToc.vue b/src/components/spec-renderer-toc/SpecRendererToc.vue
index 9e9746ad1..d7db51f71 100644
--- a/src/components/spec-renderer-toc/SpecRendererToc.vue
+++ b/src/components/spec-renderer-toc/SpecRendererToc.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    ref="tocNavRef"
+    ref="tocNav"
     class="table-of-contents"
     data-testid="table-of-contents"
   >
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { provide, computed, ref, watch, nextTick } from 'vue'
+import { provide, computed, ref, watch, nextTick, useTemplateRef } from 'vue'
 import type { PropType, ComputedRef } from 'vue'
 import { itemComponent } from './index'
 import { useScroll } from '@vueuse/core'
@@ -112,7 +112,7 @@ const emit = defineEmits<{
   (e: 'item-selected', id: string): void
 }>()
 
-const tocNavRef = ref<HTMLElement | null>(null)
+const tocNavRef = useTemplateRef('tocNav')
 
 const scrollableContainerRef = ref<HTMLElement | null>(null)