diff --git a/cypress/support/index.ts b/cypress/support/index.ts
index 0df0d3c591..1976b6db94 100644
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -3,7 +3,6 @@ import { mount } from 'cypress/vue'
 import { createMemoryHistory, createRouter } from 'vue-router/dist/vue-router.prod.cjs'
 import type { RouteRecordRaw } from 'vue-router'
 import type { App, ComputedOptions } from 'vue'
-import { BindOncePlugin } from 'vue-bind-once'
 import Chainable = Cypress.Chainable
 import 'cypress-fail-fast'
 // Import Kongponent styles
@@ -38,7 +37,7 @@ Cypress.Commands.add('mount', (component: ComputedOptions, options = {}): Chaina
         app.use(options.router)
       }
     },
-  }, BindOncePlugin)
+  })
 
   return mount(component, options)
 })
diff --git a/docs/guide/contributing.md b/docs/guide/contributing.md
index 8639dca174..9107bdcf54 100644
--- a/docs/guide/contributing.md
+++ b/docs/guide/contributing.md
@@ -218,23 +218,35 @@ It's essential to choose context-aware and descriptive names. This practice ensu
 
 #### Attributes
 
-Sometimes you will need to generate a random string to be used as value for various attributes (e.g. accessibility-related attributes like `id`, `for`, `aria-labelledby`, etc.). 
+Sometimes you will need to generate a random string to be used as value for various attributes (e.g. accessibility-related attributes like `id`, `for`, `aria-labelledby`, etc.).
 
-To generate a unique id so that it is safe for SSR, you **must** use the `useUniqueId` composable in your component:
+To generate a unique id so that it is safe for SSR, you **must** use the [`useId` composable](https://vuejs.org/api/composition-api-helpers#useid) in your component:
 
 ```html
 <script setup lang="ts">
-import useUniqueId from '@/composables/useUniqueId'
+import { useId } from 'vue'
 
-const id = useUniqueId()
+const id = useId()
 </script>
 ```
 
-Then you must use the [`v-bind-once` directive](https://github.com/danielroe/vue-bind-once) to bind the unique id to element attributes (this prevents hydration issues in SSR apps):
+Note that `useId` can only be used at the root of the setup function. If you need a random ID in a template or in any of your component functions (e.g. to give each `key` in a `v-for` loop a unique value), you should use the `getUniqueStringId` helper function:
 
-```html
-<label v-bind-once="{ for: id }">Label</label>
-<input v-bind-once="{ id: id }" />
+```vue
+<template>
+  <div v-for="item in items" :key="item.id">
+    <!-- some content -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getUniqueStringId } from '@/utilities'
+
+const items = myArray.map(item => ({
+  ...item,
+  id: getUniqueStringId(), // add a unique id
+}))
+</script>
 ```
 
 ## Testing your component
diff --git a/docs/guide/usage.md b/docs/guide/usage.md
index c1c32b7705..c265f0e4b3 100644
--- a/docs/guide/usage.md
+++ b/docs/guide/usage.md
@@ -68,9 +68,6 @@ Import and registration can be done individually in the app entry file (e.g. `ma
 ```ts
 // main.ts (or Vue entry file)
 
-// Kongponents rely on vue-bind-once directive to work properly
-// The Kongponents bundle includes the vue-bind-once package so you won't need to install it separately, but it does need to be registered
-import { BindOncePlugin } from 'vue-bind-once'
 import { createApp } from 'vue'
 import { KButton } from '@kong/kongponents'
 import '@kong/kongponents/dist/style.css'
@@ -79,9 +76,6 @@ import '@kong/kongponents/dist/style.css'
 
 const app = createApp(App)
 
-// Register the vue-bind-once directive as a Vue Plugin
-app.use(BindOncePlugin)
-
 // Register an individual Kongponent
 app.component('KButton', KButton)
 
@@ -115,8 +109,6 @@ this path instead: import '~@kong/kongponents/dist/style.css' */
 </style>
 ```
 
-When using Kongponents individually like this you will still need to register [`vue-bind-once` plugin](https://github.com/danielroe/vue-bind-once). Please refer to [global registration](#global-registration) section for example.
-
 ## TypeScript interfaces
 
 :::tip NOTE
diff --git a/package.json b/package.json
index 94a55c1373..0c3dab0085 100644
--- a/package.json
+++ b/package.json
@@ -60,16 +60,15 @@
     "date-fns-tz": "^2.0.1",
     "focus-trap": "^7.6.0",
     "focus-trap-vue": "^4.0.3",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.0.9",
     "sortablejs": "^1.15.3",
     "swrv": "^1.0.4",
     "v-calendar": "^3.1.2",
-    "vue-bind-once": "^0.2.1",
     "vue-draggable-next": "^2.2.1"
   },
   "peerDependencies": {
     "axios": "^1.7.7",
-    "vue": ">= 3.3.4 < 4",
+    "vue": ">= 3.5.0 < 4",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4bb750ae0a..719240cc1e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,8 +33,8 @@ importers:
         specifier: ^4.0.3
         version: 4.0.3(focus-trap@7.6.0)(vue@3.5.12(typescript@5.6.3))
       nanoid:
-        specifier: ^5.0.7
-        version: 5.0.7
+        specifier: ^5.0.9
+        version: 5.0.9
       sortablejs:
         specifier: ^1.15.3
         version: 1.15.3
@@ -44,9 +44,6 @@ importers:
       v-calendar:
         specifier: ^3.1.2
         version: 3.1.2(@popperjs/core@2.11.8)(vue@3.5.12(typescript@5.6.3))
-      vue-bind-once:
-        specifier: ^0.2.1
-        version: 0.2.1(vue@3.5.12(typescript@5.6.3))
       vue-draggable-next:
         specifier: ^2.2.1
         version: 2.2.1(sortablejs@1.15.3)(vue@3.5.12(typescript@5.6.3))
@@ -824,7 +821,6 @@ packages:
 
   '@evilmartians/lefthook@1.8.2':
     resolution: {integrity: sha512-SZdQk3W9q7tcJwnSwEMUubQqVIK7SHxv52hEAnV7o3nPI+xKcmd+rN0hZIJg07wjBaJRAjzdvoQySKQQYPW5Qw==}
-    cpu: [x64, arm64, ia32]
     os: [darwin, linux, win32]
     hasBin: true
 
@@ -3427,8 +3423,8 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  nanoid@5.0.7:
-    resolution: {integrity: sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==}
+  nanoid@5.0.9:
+    resolution: {integrity: sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==}
     engines: {node: ^18 || >=20}
     hasBin: true
 
@@ -4205,9 +4201,6 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  scule@1.3.0:
-    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
-
   search-insights@2.14.0:
     resolution: {integrity: sha512-OLN6MsPMCghDOqlCtsIsYgtsC0pnwVTyT9Mu6A3ewOj1DxvzZF6COrn2g86E/c05xbktB0XN04m/t1Z+n+fTGw==}
 
@@ -4821,11 +4814,6 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
-  vue-bind-once@0.2.1:
-    resolution: {integrity: sha512-17toDsxK7hc8folglp6TYtybi/Q0FVJal6plFeMeofWd2nOl4axHg9ckR/5ORNCj+GyjMAWh/OD10MvT6AXbHA==}
-    peerDependencies:
-      vue: ^3
-
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -7644,7 +7632,7 @@ snapshots:
 
   execa@8.0.1:
     dependencies:
-      cross-spawn: 7.0.6
+      cross-spawn: 7.0.3
       get-stream: 8.0.1
       human-signals: 5.0.0
       is-stream: 3.0.0
@@ -7657,7 +7645,7 @@ snapshots:
   execa@9.2.0:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
-      cross-spawn: 7.0.6
+      cross-spawn: 7.0.3
       figures: 6.1.0
       get-stream: 9.0.1
       human-signals: 7.0.0
@@ -8651,7 +8639,7 @@ snapshots:
 
   nanoid@3.3.7: {}
 
-  nanoid@5.0.7: {}
+  nanoid@5.0.9: {}
 
   nanospinner@1.1.0:
     dependencies:
@@ -9298,8 +9286,6 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.4.1
 
-  scule@1.3.0: {}
-
   search-insights@2.14.0: {}
 
   semantic-release@24.2.0(typescript@5.6.3):
@@ -10024,11 +10010,6 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
-  vue-bind-once@0.2.1(vue@3.5.12(typescript@5.6.3)):
-    dependencies:
-      scule: 1.3.0
-      vue: 3.5.12(typescript@5.6.3)
-
   vue-demi@0.14.10(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       vue: 3.5.12(typescript@5.6.3)
diff --git a/src/components/KCatalog/KCatalog.vue b/src/components/KCatalog/KCatalog.vue
index 7ce5d90f93..12a83a3dbc 100644
--- a/src/components/KCatalog/KCatalog.vue
+++ b/src/components/KCatalog/KCatalog.vue
@@ -86,9 +86,9 @@
 
     <div
       v-else
-      v-bind-once="{ 'data-tableid': catalogId }"
       class="catalog-page"
       :class="`card-${cardSize}`"
+      :data-tableid="catalogId"
     >
       <slot
         :data="data"
@@ -154,7 +154,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { ref, computed, onMounted, watch, useSlots } from 'vue'
+import { ref, computed, onMounted, watch, useSlots, useId } from 'vue'
 import type {
   CatalogItem,
   CatalogPreferences,
@@ -177,7 +177,6 @@ import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
 import KButton from '@/components/KButton/KButton.vue'
 import KPagination from '@/components/KPagination/KPagination.vue'
 import KCatalogItem from './KCatalogItem.vue'
-import useUniqueId from '@/composables/useUniqueId'
 
 const { useRequest, useDebounce, useSwrvState } = useUtilities()
 const DEFAULT_PAGE_SIZE = 15
@@ -372,7 +371,7 @@ const emit = defineEmits<{
 
 const slots = useSlots()
 
-const catalogId = useUniqueId()
+const catalogId = useId()
 
 const getInitialPageSize = (): number => {
   const initialPageSize = props.paginationPageSizes?.[0]
diff --git a/src/components/KCheckbox/KCheckbox.vue b/src/components/KCheckbox/KCheckbox.vue
index 5dea546904..2d21c8fe9f 100644
--- a/src/components/KCheckbox/KCheckbox.vue
+++ b/src/components/KCheckbox/KCheckbox.vue
@@ -8,7 +8,7 @@
       :class="{ 'has-label': hasLabel }"
     >
       <input
-        v-bind-once="{ id: inputId }"
+        :id="inputId"
         v-bind="modifiedAttrs"
         :aria-checked="modelValue"
         class="checkbox-input"
@@ -36,9 +36,9 @@
     <div class="checkbox-label-wrapper">
       <KLabel
         v-if="hasLabel"
-        v-bind-once="{ for: inputId }"
         v-bind="labelAttributes"
         class="checkbox-label"
+        :for="inputId"
       >
         <slot>{{ label }}</slot>
 
@@ -63,12 +63,11 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, useAttrs, useSlots } from 'vue'
+import { computed, useAttrs, useId, useSlots } from 'vue'
 import type { LabelAttributes } from '@/types'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import { CheckSmallIcon, IndeterminateSmallIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   modelValue: {
@@ -110,7 +109,8 @@ const emit = defineEmits<{
 const slots = useSlots()
 const attrs = useAttrs()
 
-const inputId = attrs.id ? String(attrs.id) : useUniqueId()
+const defaultId = useId()
+const inputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 const hasLabel = computed((): boolean => !!(props.label || slots.default))
 const isDisabled = computed((): boolean => attrs?.disabled !== undefined && String(attrs?.disabled) !== 'false')
 
diff --git a/src/components/KCollapse/KCollapse.vue b/src/components/KCollapse/KCollapse.vue
index daa9cfdfa1..f6f4ccba13 100644
--- a/src/components/KCollapse/KCollapse.vue
+++ b/src/components/KCollapse/KCollapse.vue
@@ -21,7 +21,7 @@
           :toggle="toggleDisplay"
         >
           <button
-            v-bind-once="{ 'aria-controls': contentId }"
+            :aria-controls="contentId"
             :aria-expanded="!collapsedState"
             :aria-label="triggerLabel ? undefined : 'Toggle content'"
             class="collapse-trigger-content"
@@ -59,7 +59,7 @@
     <Transition name="kongponents-fade-transition">
       <div
         v-show="!collapsedState"
-        v-bind-once="{ id: contentId }"
+        :id="contentId"
         class="collapse-hidden-content"
         data-testid="collapse-hidden-content"
       >
@@ -71,12 +71,11 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, ref, useSlots, watch } from 'vue'
+import { computed, ref, useId, useSlots, watch } from 'vue'
 import type { TriggerAlignment, HeaderTag } from '@/types'
 import { TriggerAlignmentArray, HeaderTags } from '@/types'
 import { ChevronRightIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   // Is the KCollapse collapsed? Defaults to true-->
@@ -113,7 +112,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void;
 }>()
 
-const contentId = useUniqueId()
+const contentId = useId()
 
 const isCollapsed = ref<boolean>(true)
 const modelValueChanged = ref<boolean>(false)
diff --git a/src/components/KCopy/KCopy.vue b/src/components/KCopy/KCopy.vue
index aee373ea06..b35f29af0f 100644
--- a/src/components/KCopy/KCopy.vue
+++ b/src/components/KCopy/KCopy.vue
@@ -35,7 +35,7 @@
       >
         <KClipboardProvider v-slot="{ copyToClipboard }">
           <button
-            v-bind-once="{ id: copyButtonElementId }"
+            :id="copyButtonElementId"
             :aria-label="tooltipText"
             class="copy-to-clipboard-button"
             data-testid="copy-to-clipboard"
@@ -56,13 +56,12 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
+import { computed, ref, watch, onMounted, onUnmounted, useId } from 'vue'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 import { CopyIcon } from '@kong/icons'
 import KClipboardProvider from '@/components/KClipboardProvider'
 import KTooltip from '@/components/KTooltip/KTooltip.vue'
 import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   /**
@@ -140,7 +139,7 @@ const props = defineProps({
   },
 })
 
-const copyButtonElementId = useUniqueId()
+const copyButtonElementId = useId()
 
 const tooltipText = ref<string>('')
 const nonSuccessText = computed((): string => {
diff --git a/src/components/KFileUpload/KFileUpload.vue b/src/components/KFileUpload/KFileUpload.vue
index 316c14023a..ec8a6f2772 100644
--- a/src/components/KFileUpload/KFileUpload.vue
+++ b/src/components/KFileUpload/KFileUpload.vue
@@ -7,7 +7,7 @@
       v-if="label"
       v-bind="labelAttributes"
       ref="labelElement"
-      :for="$attrs.id ? String($attrs.id) : undefined"
+      :for="fileInputId"
       :required="isRequired"
     >
       {{ strippedLabel }}
@@ -30,7 +30,7 @@
       </span>
 
       <KInput
-        v-bind="attrs.id ? { id: String(attrs.id) } : {}"
+        :id="fileInputId"
         :key="fileInputKey"
         ref="fileInputElement"
         :accept="accept"
@@ -74,7 +74,7 @@ defineOptions({
 })
 
 import type { PropType } from 'vue'
-import { computed, ref, useAttrs, useSlots, onMounted, watch, nextTick } from 'vue'
+import { computed, ref, useAttrs, useId, useSlots, watch } from 'vue'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import KInput from '@/components/KInput/KInput.vue'
 import KButton from '@/components/KButton/KButton.vue'
@@ -134,6 +134,9 @@ const emit = defineEmits<{
 
 const { stripRequiredLabel } = useUtilities()
 
+const defaultId = useId()
+const fileInputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
+
 const modifiedAttrs = computed(() => {
   const $attrs = { ...attrs }
 
@@ -251,32 +254,9 @@ const resetInput = (): void => {
   emit('file-removed')
 }
 
-const setLabelAttributes = () => {
-  /**
-   * Temporary fix for the issue where we can't use v-bind-once to pass id to a custom element (KInput)
-   * TODO: remove this once useId is released in Vue 3.5
-   */
-  if (!attrs.id) {
-    const inputElementId = fileInputElement.value?.$el?.querySelector('input')?.id
-
-    if (inputElementId) {
-      labelElement.value?.$el?.setAttribute('for', inputElementId)
-    }
-  }
-}
-
-watch(fileInputKey, async () => {
-  await nextTick()
-  setLabelAttributes()
-})
-
 watch(() => attrs.id, () => {
   fileInputKey.value++
 }, { immediate: true })
-
-onMounted(() => {
-  setLabelAttributes()
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
index 5e6043be97..e45e7d58f2 100644
--- a/src/components/KInput/KInput.vue
+++ b/src/components/KInput/KInput.vue
@@ -5,7 +5,7 @@
   >
     <KLabel
       v-if="label"
-      v-bind-once="{ for: inputId }"
+      :for="inputId"
       v-bind="labelAttributes"
       :required="isRequired"
     >
@@ -32,7 +32,8 @@
       </div>
 
       <input
-        v-bind-once="{ id: inputId, ...(helpText && { 'aria-describedby': helpTextId }) }"
+        :id="inputId"
+        :aria-describedby="helpText ? helpTextId : undefined"
         :aria-invalid="error || hasError || charLimitExceeded ? 'true' : undefined"
         class="input"
         :type="inputType"
@@ -77,8 +78,8 @@
     >
       <p
         v-if="helpText"
+        :id="helpTextId"
         :key="String(helpTextKey)"
-        v-bind-once="{ id: helpTextId }"
         class="help-text"
       >
         {{ helpText }}
@@ -88,13 +89,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, useSlots, useAttrs, onMounted, nextTick } from 'vue'
+import { computed, ref, watch, useSlots, useAttrs, onMounted, nextTick, useId } from 'vue'
 import type { PropType } from 'vue'
 import type { LabelAttributes, LimitExceededData } from '@/types'
 import useUtilities from '@/composables/useUtilities'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 import { VisibilityIcon, VisibilityOffIcon } from '@kong/icons'
 
 const props = defineProps({
@@ -175,8 +175,9 @@ const slots = useSlots()
 const attrs = useAttrs()
 
 const isRequired = computed((): boolean => attrs?.required !== undefined && String(attrs?.required) !== 'false')
-const inputId = attrs.id ? String(attrs.id) : useUniqueId()
-const helpTextId = useUniqueId()
+const defaultId = useId()
+const inputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
+const helpTextId = useId()
 const strippedLabel = computed((): string => stripRequiredLabel(props.label, isRequired.value))
 const hasLabelTooltip = computed((): boolean => !!(props.labelAttributes?.info || slots['label-tooltip']))
 
diff --git a/src/components/KInputSwitch/KInputSwitch.vue b/src/components/KInputSwitch/KInputSwitch.vue
index 084f5aa621..cb1773ba32 100644
--- a/src/components/KInputSwitch/KInputSwitch.vue
+++ b/src/components/KInputSwitch/KInputSwitch.vue
@@ -5,8 +5,8 @@
   >
     <input
       v-bind="strippedAttrs"
+      :id="inputId"
       ref="switchInputElement"
-      v-bind-once="{ id: inputId }"
       :checked="modelValue"
       :disabled="disabled"
       tabindex="-1"
@@ -19,8 +19,8 @@
       :label="disabledTooltipText"
     >
       <span
-        v-bind-once="{ 'aria-labelledby': inputId }"
         :aria-checked="modelValue"
+        :aria-labelledby="inputId"
         class="switch-control"
         :class="{ 'checked': modelValue, 'disabled': disabled }"
         data-testid="switch-control"
@@ -38,7 +38,7 @@
 
     <KLabel
       v-if="label || $slots.label"
-      v-bind-once="{ for: inputId }"
+      :for="inputId"
     >
       <slot name="label">
         {{ label }}
@@ -49,8 +49,7 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, ref, useAttrs } from 'vue'
-import useUniqueId from '@/composables/useUniqueId'
+import { computed, ref, useAttrs, useId } from 'vue'
 
 const props = defineProps({
   /**
@@ -100,7 +99,8 @@ const attrs = useAttrs()
 
 const switchInputElement = ref<HTMLInputElement | null>(null)
 
-const inputId = attrs.id ? String(attrs.id) : useUniqueId()
+const defaultId = useId()
+const inputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 
 /**
 * Strips falsy `disabled` attribute, so it does not fall onto native <a> elements.
diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue
index fefe65e644..eca8dfb906 100644
--- a/src/components/KLabel/KLabel.vue
+++ b/src/components/KLabel/KLabel.vue
@@ -12,7 +12,7 @@
       :tooltip-id="tooltipId"
     >
       <InfoIcon
-        v-bind-once="{ 'aria-describedby': tooltipId }"
+        :aria-describedby="tooltipId"
         class="tooltip-trigger-icon"
         :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
         tabindex="0"
@@ -26,12 +26,11 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { computed, useSlots } from 'vue'
+import { computed, useId, useSlots } from 'vue'
 import KTooltip from '@/components/KTooltip/KTooltip.vue'
 import type { TooltipAttributes } from '@/types'
 import { InfoIcon } from '@kong/icons'
 import { KUI_COLOR_TEXT_NEUTRAL } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   info: {
@@ -66,7 +65,7 @@ const slots = useSlots()
 
 const hasTooltip = computed((): boolean => !!(props.help || props.info || slots.tooltip))
 
-const tooltipId = useUniqueId()
+const tooltipId = useId()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
index bd3b9fb68e..85bd6fab6e 100644
--- a/src/components/KMultiselect/KMultiselect.vue
+++ b/src/components/KMultiselect/KMultiselect.vue
@@ -6,9 +6,9 @@
   >
     <KLabel
       v-if="label"
-      v-bind-once="{ for: multiselectWrapperId }"
       v-bind="labelAttributes"
       :data-testid="labelAttributes['data-testid'] ? labelAttributes['data-testid'] : 'multiselect-label'"
+      :for="multiselectWrapperId"
       :required="isRequired"
     >
       {{ strippedLabel }}
@@ -30,8 +30,8 @@
           @open="() => handleToggle(true, isToggled, toggle)"
         >
           <div
+            :id="multiselectWrapperId"
             ref="multiselectElement"
-            v-bind-once="{ id: multiselectWrapperId }"
             class="multiselect-trigger"
             :class="{ focused: isFocused, hovered: isHovered, disabled: isDisabled, readonly: isReadonly }"
             data-testid="multiselect-trigger"
@@ -285,7 +285,7 @@
 
 <script lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, computed, watch, nextTick, onMounted, onUnmounted, useAttrs, useSlots } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onUnmounted, useAttrs, useSlots, useId } from 'vue'
 import useUtilities from '@/composables/useUtilities'
 import KBadge from '@/components/KBadge/KBadge.vue'
 import KInput from '@/components/KInput/KInput.vue'
@@ -300,7 +300,7 @@ import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 import { sanitizeInput } from '@/utilities/sanitizeInput'
 import { useEventListener } from '@vueuse/core'
-import useUniqueId from '@/composables/useUniqueId'
+import { getUniqueStringId } from '@/utilities'
 
 // functions used in prop validators
 const getValues = (items: MultiselectItem[]) => {
@@ -495,8 +495,9 @@ const defaultKPopAttributes = {
 const key = ref(0)
 const stagingKey = ref(0)
 
-const multiselectWrapperId = attrs.id ? String(attrs.id) : useUniqueId() // unique id for the KLabel `for` attribute
-const multiselectKey = useUniqueId()
+const defaultId = useId()
+const multiselectWrapperId = computed((): string => attrs.id ? String(attrs.id) : defaultId) // unique id for the KLabel `for` attribute
+const multiselectKey = useId()
 
 const multiselectElement = ref<HTMLDivElement | null>(null)
 const multiselectInputElement = ref<InstanceType<typeof KInput> | null>(null)
@@ -835,7 +836,7 @@ const handleAddItem = (): void => {
   const pos = unfilteredItems.value.length + 1
   const item: MultiselectItem = {
     label: sanitizeInput(filterString.value + ''),
-    value: useUniqueId(),
+    value: getUniqueStringId(),
     key: `${sanitizeInput(filterString.value).replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${pos}`,
   }
   emit('item-added', item)
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 0cb15feeec..f23407b28b 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -10,7 +10,7 @@
     >
       <slot>
         <KButton
-          v-bind-once="{ 'aria-controls': popoverId }"
+          :aria-controls="popoverId"
           data-testid="popover-button"
         >
           {{ buttonText }}
@@ -21,8 +21,8 @@
     <Transition name="kongponents-fade-transition">
       <div
         v-show="isVisible"
+        :id="popoverId"
         ref="popoverElement"
-        v-bind-once="{ id: popoverId }"
         :aria-labelledby="$slots.title || title ? titleId : undefined"
         class="popover"
         :class="popoverClassesObj"
@@ -83,7 +83,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed, watch, useId } from 'vue'
 import type { PropType } from 'vue'
 import { useFloating, autoUpdate, autoPlacement, flip, shift } from '@floating-ui/vue'
 import type { PopPlacements, PopTrigger } from '@/types'
@@ -92,7 +92,6 @@ import KButton from '@/components/KButton/KButton.vue'
 import useUtilities from '@/composables/useUtilities'
 import { CloseIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import useUniqueId from '@/composables/useUniqueId'
 
 const props = defineProps({
   buttonText: {
@@ -163,8 +162,8 @@ const emit = defineEmits(['open', 'close', 'popover-click'])
 
 const { getSizeFromString } = useUtilities()
 
-const popoverId = useUniqueId()
-const titleId = useUniqueId()
+const popoverId = useId()
+const titleId = useId()
 const kPopoverElement = ref<HTMLElement | null>(null)
 const triggerWrapperElement = ref<HTMLElement | null>(null)
 const popoverElement = ref<HTMLElement | null>(null)
diff --git a/src/components/KRadio/KRadio.vue b/src/components/KRadio/KRadio.vue
index a250d8cf65..a60469747d 100644
--- a/src/components/KRadio/KRadio.vue
+++ b/src/components/KRadio/KRadio.vue
@@ -7,7 +7,7 @@
     ]"
   >
     <input
-      v-bind-once="{ id: inputId }"
+      :id="inputId"
       v-bind="modifiedAttrs"
       :aria-checked="isChecked"
       :checked="isChecked"
@@ -25,9 +25,9 @@
       :class="{ 'has-description': showDescription }"
     >
       <KLabel
-        v-bind-once="{ for: inputId }"
         v-bind="labelAttributes"
         class="radio-label"
+        :for="inputId"
       >
         <slot>{{ label }}</slot>
 
@@ -89,11 +89,10 @@
 
 <script lang="ts">
 import type { PropType } from 'vue'
-import { computed, useAttrs, useSlots } from 'vue'
+import { computed, useAttrs, useId, useSlots } from 'vue'
 import type { RadioTypes, LabelAttributes } from '@/types'
 import { RadioTypesArray } from '@/types'
 import KLabel from '@/components/KLabel/KLabel.vue'
-import useUniqueId from '@/composables/useUniqueId'
 
 export default {
   inheritAttrs: false,
@@ -177,7 +176,8 @@ const props = defineProps({
 const slots = useSlots()
 const attrs = useAttrs()
 
-const inputId = attrs.id ? String(attrs.id) : useUniqueId()
+const defaultId = useId()
+const inputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 const isDisabled = computed((): boolean => attrs?.disabled !== undefined && String(attrs?.disabled) !== 'false')
 const hasLabel = computed((): boolean => !!(props.label || slots.default))
 // for regular radio we only show description if there is a label or default slot
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index d8b2a24972..fa0e1c6eb3 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -8,7 +8,7 @@
       ref="labelElement"
       v-bind="labelAttributes"
       data-testid="select-label"
-      :for="$attrs.id ? String($attrs.id) : undefined"
+      :for="selectInputId"
       :required="isRequired"
     >
       {{ strippedLabel }}
@@ -32,14 +32,15 @@
         @popover-click="() => onPopoverClick(toggle)"
       >
         <div
+          :id="selectWrapperId"
           ref="selectWrapperElement"
-          v-bind-once="{ id: selectWrapperId }"
           class="select-wrapper"
           data-testid="select-wrapper"
           role="listbox"
           @click="onSelectWrapperClick"
         >
           <KInput
+            :id="selectInputId"
             :key="inputKey"
             ref="inputElement"
             autocapitalize="off"
@@ -52,7 +53,7 @@
             :model-value="filterQuery"
             :placeholder="selectedItem && !enableFiltering ? selectedItem.label : placeholderText"
             :readonly="isReadonly"
-            v-bind="attrs.id ? { id: String(attrs.id), ...modifiedAttrs } : { ...modifiedAttrs }"
+            v-bind="modifiedAttrs"
             @blur="onInputBlur"
             @click="onInputClick"
             @focus="onInputFocus"
@@ -202,7 +203,7 @@
 
 <script setup lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, computed, watch, nextTick, useAttrs, useSlots, onUnmounted, onMounted } from 'vue'
+import { ref, computed, watch, nextTick, useAttrs, useSlots, onUnmounted, onMounted, useId } from 'vue'
 import useUtilities from '@/composables/useUtilities'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import KInput from '@/components/KInput/KInput.vue'
@@ -219,8 +220,8 @@ import type {
 import { ChevronDownIcon, CloseIcon, ProgressIcon } from '@kong/icons'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 import { sanitizeInput } from '@/utilities/sanitizeInput'
-import useUniqueId from '@/composables/useUniqueId'
 import { useEventListener } from '@vueuse/core'
+import { getUniqueStringId } from '@/utilities'
 
 defineOptions({
   inheritAttrs: false,
@@ -363,6 +364,9 @@ const emit = defineEmits<{
 const attrs = useAttrs()
 const slots = useSlots()
 
+const defaultId = useId()
+const selectInputId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
+
 const isDropdownOpen = ref<boolean>(false)
 
 const resizeObserver = ref<ResizeObserverHelper>()
@@ -402,7 +406,7 @@ const uniqueFilterQuery = computed((): boolean => {
   return true
 })
 
-const selectWrapperId = useUniqueId() // unique id for the KPop target
+const selectWrapperId = useId() // unique id for the KPop target
 const selectedItem = ref<SelectItem | null>(null)
 const selectItems = ref<SelectItem[]>([])
 const inputFocused = ref<boolean>(false)
@@ -503,7 +507,7 @@ const handleAddItem = (): void => {
   const pos = (selectItems.value?.length || 0) + 1
   const item: SelectItem = {
     label: sanitizeInput(filterQuery.value),
-    value: useUniqueId(),
+    value: getUniqueStringId(),
     key: `${sanitizeInput(filterQuery.value).replace(/ /gi, '-')?.replace(/[^a-z0-9-_]/gi, '')}-${pos}`,
     custom: true,
   }
@@ -643,20 +647,6 @@ const onOpen = (toggle: () => void) => {
   toggle()
 }
 
-const setLabelAttributes = () => {
-  /**
-   * Temporary fix for the issue where we can't use v-bind-once to pass id to a custom element (KInput)
-   * TODO: remove this once useId is released in Vue 3.5
-   */
-  if (!attrs.id) {
-    const inputElementId = inputElement.value?.$el?.querySelector('input')?.id
-
-    if (inputElementId) {
-      labelElement.value?.$el?.setAttribute('for', inputElementId)
-    }
-  }
-}
-
 watch(value, (newVal, oldVal) => {
   if (newVal !== oldVal) {
     const item = selectItems.value?.filter((item: SelectItem) => item.value === newVal)
@@ -744,12 +734,6 @@ watch(selectedItem, (newVal, oldVal) => {
   }
 }, { deep: true })
 
-watch(() => attrs.id, async () => {
-  inputKey.value++
-  await nextTick()
-  setLabelAttributes()
-}, { immediate: true })
-
 onMounted(() => {
   if (selectWrapperElement.value) {
     resizeObserver.value = ResizeObserverHelper.create(() => {
@@ -759,8 +743,6 @@ onMounted(() => {
     resizeObserver.value.observe(selectWrapperElement.value as HTMLDivElement)
   }
 
-  setLabelAttributes()
-
   useEventListener(document, 'keydown', (event: any) => {
     // When enableFiltering is false, the KInput doesn't have focus so we need to handle arrow key events here
     if (!props.enableFiltering && document.activeElement?.tagName === 'BODY' && !inputFocused.value && isDropdownOpen.value) {
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 22f633f1b3..2e21e4dfc4 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -92,12 +92,12 @@
         @scroll.passive="scrollHandler"
       >
         <table
-          v-bind-once="{ 'data-tableid': tableId }"
           class="table"
           :class="{
             'has-hover': rowHover,
             'is-clickable': isClickable
           }"
+          :data-tableid="tableId"
         >
           <thead :class="{ 'is-scrolled': isScrolled }">
             <tr
@@ -250,7 +250,7 @@
 
 <script setup lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, watch, computed, onMounted, useAttrs, useSlots } from 'vue'
+import { ref, watch, computed, onMounted, useAttrs, useSlots, useId } from 'vue'
 import KButton from '@/components/KButton/KButton.vue'
 import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
 import KSkeleton from '@/components/KSkeleton/KSkeleton.vue'
@@ -276,7 +276,6 @@ import type {
 import { EmptyStateIconVariants } from '@/types'
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import ColumnVisibilityMenu from './../KTableView/ColumnVisibilityMenu.vue'
-import useUniqueId from '@/composables/useUniqueId'
 
 const { useDebounce, useRequest, useSwrvState, clientSideSorter: defaultClientSideSorter, getSizeFromString } = useUtilities()
 
@@ -512,7 +511,7 @@ const emit = defineEmits<{
 const attrs = useAttrs()
 const slots = useSlots()
 
-const tableId = useUniqueId()
+const tableId = useId()
 const defaultFetcherProps = {
   pageSize: 15,
   page: 1,
diff --git a/src/components/KTableData/KTableData.vue b/src/components/KTableData/KTableData.vue
index a5f5fab547..cf9bd6aa29 100644
--- a/src/components/KTableData/KTableData.vue
+++ b/src/components/KTableData/KTableData.vue
@@ -155,7 +155,7 @@
 
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { ref, watch, computed, onMounted, useSlots } from 'vue'
+import { ref, watch, computed, onMounted, useSlots, useId } from 'vue'
 import KTableView from '@/components/KTableView/KTableView.vue'
 import useUtilities from '@/composables/useUtilities'
 import type {
@@ -178,7 +178,6 @@ import type {
   RowExpandPayload,
 } from '@/types'
 import { EmptyStateIconVariants } from '@/types'
-import useUniqueId from '@/composables/useUniqueId'
 import { getInitialPageSize, DEFAULT_PAGE_SIZE } from '@/utilities'
 
 const props = withDefaults(defineProps<TableDataProps>(), {
@@ -236,7 +235,7 @@ const emit = defineEmits<{
   (e: 'update:row-expanded', data: RowExpandPayload): void
 }>()
 
-const tableId = useUniqueId()
+const tableId = useId()
 
 const tableData = ref<Record<string, any>[]>([])
 const tableHeaders = computed((): TableDataHeader[] => props.sortable ? props.headers : props.headers.map((header) => ({ ...header, sortable: false })))
diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue
index 1b3c900db8..93a80d4791 100644
--- a/src/components/KTableView/KTableView.vue
+++ b/src/components/KTableView/KTableView.vue
@@ -114,12 +114,12 @@
         @scroll.passive="scrollHandler"
       >
         <table
-          v-bind-once="{ 'data-tableid': tableId }"
           class="table"
           :class="{
             'has-hover': rowHover && !isActionsDropdownHovered,
             'is-clickable': isClickable
           }"
+          :data-tableid="tableId"
         >
           <thead
             v-if="!hideHeaders"
@@ -368,7 +368,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, useAttrs, useSlots, nextTick } from 'vue'
+import { ref, watch, computed, useAttrs, useSlots, nextTick, useId } from 'vue'
 import KButton from '@/components/KButton/KButton.vue'
 import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
 import KSkeleton from '@/components/KSkeleton/KSkeleton.vue'
@@ -392,13 +392,12 @@ import type {
 import { EmptyStateIconVariants, TableViewHeaderKeys } from '@/types'
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30, KUI_SPACE_60 } from '@kong/design-tokens'
 import ColumnVisibilityMenu from './ColumnVisibilityMenu.vue'
-import useUniqueId from '@/composables/useUniqueId'
 import useUtilities from '@/composables/useUtilities'
 import KPagination from '@/components/KPagination/KPagination.vue'
 import KDropdown from '@/components/KDropdown/KDropdown.vue'
 import KCheckbox from '@/components/KCheckbox/KCheckbox.vue'
 import BulkActionsDropdown from './BulkActionsDropdown.vue'
-import { getInitialPageSize } from '@/utilities'
+import { getInitialPageSize, getUniqueStringId } from '@/utilities'
 
 const props = withDefaults(defineProps<TableViewProps>(), {
   resizeColumns: false,
@@ -453,7 +452,7 @@ const emit = defineEmits<{
 const attrs = useAttrs()
 const slots = useSlots()
 
-const tableId = useUniqueId()
+const tableId = useId()
 const { getSizeFromString } = useUtilities()
 
 const getRowKey = (row: Record<string, any>): string => {
@@ -1114,7 +1113,7 @@ watch([() => props.data, dataSelectState], (newVals) => {
   // update the rowKeyMap
   newData.forEach((row) => {
     if (!rowKeyMap.value.get(row)) {
-      const uniqueRowKey = getRowKey(row) || useUniqueId()
+      const uniqueRowKey = getRowKey(row) || getUniqueStringId()
 
       rowKeyMap.value.set(row, `table-${tableId}-row-${uniqueRowKey}`)
     }
diff --git a/src/components/KTextArea/KTextArea.vue b/src/components/KTextArea/KTextArea.vue
index e804fb192e..840a601131 100644
--- a/src/components/KTextArea/KTextArea.vue
+++ b/src/components/KTextArea/KTextArea.vue
@@ -5,7 +5,7 @@
   >
     <KLabel
       v-if="label"
-      v-bind-once="{ for: textAreaId }"
+      :for="textAreaId"
       v-bind="labelAttributes"
       :required="isRequired"
     >
@@ -19,7 +19,7 @@
     </KLabel>
 
     <textarea
-      v-bind-once="{ id: textAreaId }"
+      :id="textAreaId"
       v-bind="modifiedAttrs"
       :aria-invalid="ariaInvalid"
       class="input-textarea"
@@ -45,11 +45,10 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, watch, useAttrs, useSlots } from 'vue'
+import { ref, computed, watch, useAttrs, useSlots, useId } from 'vue'
 import useUtilities from '@/composables/useUtilities'
 import KLabel from '@/components/KLabel/KLabel.vue'
 import type { TextAreaLimitExceed } from '@/types'
-import useUniqueId from '@/composables/useUniqueId'
 
 const DEFAULT_CHARACTER_LIMIT = 2048
 
@@ -161,7 +160,8 @@ const value = computed({
   },
 })
 
-const textAreaId = attrs.id ? String(attrs.id) : useUniqueId()
+const defaultId = useId()
+const textAreaId = computed((): string => attrs.id ? String(attrs.id) : defaultId)
 
 const modifiedAttrs = computed((): Record<string, any> => {
   const $attrs = { ...attrs }
diff --git a/src/components/KToaster/ToastManager.ts b/src/components/KToaster/ToastManager.ts
index 81bd960a1f..94ee1e1e66 100644
--- a/src/components/KToaster/ToastManager.ts
+++ b/src/components/KToaster/ToastManager.ts
@@ -3,7 +3,7 @@ import type { Ref, VNode } from 'vue'
 import type { Toast, ToasterAppearance, ToasterOptions } from '@/types'
 import { ToasterAppearances } from '@/types'
 import KToaster from '@/components/KToaster/KToaster.vue'
-import useUniqueId from '@/composables/useUniqueId'
+import { getUniqueStringId } from '@/utilities'
 
 const toasterContainerId = 'kongponents-toaster-container'
 
@@ -51,7 +51,7 @@ export default class ToastManager {
     // @ts-ignore
     const { key, timeoutMilliseconds, appearance, message, title } = args
 
-    const toastKey: any = key || useUniqueId()
+    const toastKey: string = key ? String(key) : getUniqueStringId()
     const toastAppearance: ToasterAppearance = (appearance && Object.keys(ToasterAppearances).indexOf(appearance) !== -1) ? appearance : toasterDefaults.appearance
     const timer: number = this.setTimer(key, timeoutMilliseconds || toasterDefaults.timeoutMilliseconds)
     const toasterMessage = typeof args === 'string' ? args : message
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 4b6050cde4..83343f4df3 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -16,7 +16,7 @@
 
     <template #content>
       <div
-        v-bind-once="{ id: tooltipId || randomTooltipId }"
+        :id="tooltipId || randomTooltipId"
         role="tooltip"
       >
         <slot
@@ -35,12 +35,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed, useId, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import KPop from '@/components/KPop/KPop.vue'
 import type { PopPlacements } from '@/types'
 import { PopPlacementsArray } from '@/types'
-import useUniqueId from '@/composables/useUniqueId'
 
 defineOptions({
   inheritAttrs: false,
@@ -95,7 +94,7 @@ const slots = useSlots()
 
 const showTooltip = computed((): boolean => !!props.text || !!props.label || !!slots.content)
 
-const randomTooltipId = useUniqueId()
+const randomTooltipId = useId()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/useUniqueId.ts b/src/composables/useUniqueId.ts
deleted file mode 100644
index 5bb1af770a..0000000000
--- a/src/composables/useUniqueId.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { nanoid } from 'nanoid'
-
-export default nanoid as () => string
diff --git a/src/index.ts b/src/index.ts
index 834a76af48..91f1a6dfcc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,6 @@
 import type { App } from 'vue'
 import * as components from './components' // Import all components
 import './styles/styles.scss' // Import all styles
-import { BindOncePlugin } from 'vue-bind-once'
 
 // Export Vue plugin
 export default {
@@ -10,8 +9,6 @@ export default {
       // @ts-ignore: key is a valid string
       app.component(key, components[key])
     }
-
-    app.use(BindOncePlugin)
   },
 }
 
diff --git a/src/utilities/getUniqueStringId.ts b/src/utilities/getUniqueStringId.ts
new file mode 100644
index 0000000000..5303fde40e
--- /dev/null
+++ b/src/utilities/getUniqueStringId.ts
@@ -0,0 +1,3 @@
+import { nanoid } from 'nanoid'
+
+export const getUniqueStringId = (): string => nanoid()
diff --git a/src/utilities/index.ts b/src/utilities/index.ts
index 208293db99..c6785eda29 100644
--- a/src/utilities/index.ts
+++ b/src/utilities/index.ts
@@ -3,3 +3,4 @@ export { debounce } from './debounce'
 export { isValidUrl } from './urls'
 export { sanitizeInput } from './sanitizeInput'
 export * from './tableHelpers'
+export * from './getUniqueStringId'