diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 16d1d347e8..041e449713 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -8,11 +8,19 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+      # Use GitHub App token as a workaround to allow bypassing branch-protection rules
+      # https://github.com/orgs/community/discussions/13836#discussioncomment-8535364
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.GH_TOKENS_APP_ID }}
+          private-key: ${{ secrets.GH_TOKENS_APP_PRIVATE_KEY }}
+
       - name: checkout repository
         uses: actions/checkout@v4
         with:
+          token: ${{ steps.app-token.outputs.token }}
           fetch-depth: 0
-          persist-credentials: false
 
       - name: Install
         uses: ./.github/actions/install
@@ -34,4 +42,4 @@ jobs:
         uses: ./.github/actions/release-alpha
         with:
           npm_token: ${{ secrets.NPM_TOKEN_GRANULAR_ACCESS }}
-          github_token: ${{ secrets.SUPPORT_TOKEN }}
+          github_token: ${{ steps.app-token.outputs.token }}
diff --git a/.github/workflows/edocs-dynamic-sync.yml b/.github/workflows/edocs-dynamic-sync.yml
index 2ea720a5af..a882582b61 100644
--- a/.github/workflows/edocs-dynamic-sync.yml
+++ b/.github/workflows/edocs-dynamic-sync.yml
@@ -4,9 +4,18 @@ jobs:
   connect-with-edocs:
     runs-on: ubuntu-latest
     steps:
+      # Use GitHub App token as a workaround to allow bypassing branch-protection rules
+      # https://github.com/orgs/community/discussions/13836#discussioncomment-8535364
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.GH_TOKENS_APP_ID }}
+          private-key: ${{ secrets.GH_TOKENS_APP_PRIVATE_KEY }}
+
       - name: Checkout X mono-repo
         uses: actions/checkout@v4
         with:
+          token: ${{ steps.app-token.outputs.token }}
           fetch-depth: 0
       - name: Get X Components Version
         id: package-version
@@ -23,5 +32,5 @@ jobs:
           --url https://api.github.com/repos/empathyco/docs-framework/actions/workflows/93444504/dispatches \
           --data '{"ref": "main",  "inputs": {"branchName": "${{ env.BRANCH_NAME }}", "version": "${{ steps.package-version.outputs.current-version }}"}}'
         env:
-          GITHUB_TOKEN: ${{ secrets.SUPPORT_TOKEN }}
+          GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
 
diff --git a/.github/workflows/publish-release.yml b/.github/workflows/publish-release.yml
index 1d7178f1cd..f57d24c2d2 100644
--- a/.github/workflows/publish-release.yml
+++ b/.github/workflows/publish-release.yml
@@ -9,10 +9,18 @@ jobs:
       options: --user 1001
 
     steps:
+      # Use GitHub App token as a workaround to allow bypassing branch-protection rules
+      # https://github.com/orgs/community/discussions/13836#discussioncomment-8535364
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.GH_TOKENS_APP_ID }}
+          private-key: ${{ secrets.GH_TOKENS_APP_PRIVATE_KEY }}
+
       - uses: actions/checkout@v4
         with:
+          token: ${{ steps.app-token.outputs.token }}
           fetch-depth: 0
-          persist-credentials: false
 
       # Install pnpm because it is not included in our container image
       - name: install pnpm
@@ -51,6 +59,6 @@ jobs:
       - name: push tags
         uses: ad-m/github-push-action@master
         with:
-          github_token: ${{ secrets.SUPPORT_TOKEN }}
+          github_token: ${{ steps.app-token.outputs.token }}
           branch: ${{ github.ref }}
           tags: true
diff --git a/.github/workflows/release-alpha.yml b/.github/workflows/release-alpha.yml
index 473a3cf2c3..5eb6681145 100644
--- a/.github/workflows/release-alpha.yml
+++ b/.github/workflows/release-alpha.yml
@@ -9,11 +9,19 @@ jobs:
       options: --user 1001
 
     steps:
+      # Use GitHub App token as a workaround to allow bypassing branch-protection rules
+      # https://github.com/orgs/community/discussions/13836#discussioncomment-8535364
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.GH_TOKENS_APP_ID }}
+          private-key: ${{ secrets.GH_TOKENS_APP_PRIVATE_KEY }}
+
       - name: checkout repository
         uses: actions/checkout@v4
         with:
+          token: ${{ steps.app-token.outputs.token }}
           fetch-depth: 0
-          persist-credentials: false
 
       # Install pnpm because it is not included in our container image
       - name: install pnpm
@@ -28,4 +36,4 @@ jobs:
         uses: ./.github/actions/release-alpha
         with:
           npm_token: ${{ secrets.NPM_TOKEN_GRANULAR_ACCESS }}
-          github_token: ${{ secrets.SUPPORT_TOKEN }}
+          github_token: ${{ steps.app-token.outputs.token }}
diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 8ed2aadd1a..dee3448d60 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.24](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.23...vue3-migration-test@1.0.0-alpha.24) (2024-06-05)
+
+
+### Features
+
+* migrate PartialQueryButton and PartialResultsList (#1501) ([5e87123](https://github.com/empathyco/x/commit/5e87123d4a6c1edeb05f83c31ee8f096b5558e0f))
+
+
+
+## [1.0.0-alpha.23](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.22...vue3-migration-test@1.0.0-alpha.23) (2024-06-04)
+
+
+### Features
+
+* add BaseEventsModal to the playground ([3e437c5](https://github.com/empathyco/x/commit/3e437c56d4e3f314b373b486e8926c4f4b028fc6))
+
+
+
+## [1.0.0-alpha.22](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.21...vue3-migration-test@1.0.0-alpha.22) (2024-06-04)
+
+
+### Features
+
+* **base-id-modal:** migrate to composition API (#1500) ([6274c67](https://github.com/empathyco/x/commit/6274c676946536c9c1c4e54205ebda18c79b8f55))
+
+
+
 ## [1.0.0-alpha.21](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.20...vue3-migration-test@1.0.0-alpha.21) (2024-05-31)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 88f56b6fac..1960ee29e8 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.24",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 0210867c1e..45c4690d74 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -12,3 +12,5 @@ export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
 export { default as TestBasePanel } from './panels/test-base-panel.vue';
 export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
+export { default as TestBaseEventsModal } from './modals/test-base-events-modal.vue';
+export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
new file mode 100644
index 0000000000..935e5363a2
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="base-modal">
+    <button @click="openModal">Open modal</button>
+    <BaseEventsModal
+      :animation="Fade"
+      :focusOnOpen="true"
+      v-bind="$attrs"
+      contentClass="content"
+      overlayClass="overlay"
+    >
+      <h1>Hello</h1>
+      <p>The modal is working with events!!</p>
+      <button @click="closeModal">Close modal</button>
+    </BaseEventsModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BaseEventsModal from '../../../../x-components/src/components/modals/base-events-modal.vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+  import { use$x } from '../../../../x-components/src/composables/use-$x';
+  const _$x = use$x();
+
+  const openModal = () => _$x.emit('UserClickedOpenEventsModal');
+
+  const closeModal = () => _$x.emit('UserClickedCloseEventsModal');
+</script>
+
+<style>
+  .base-modal {
+    .content {
+      background: white;
+      margin: auto;
+      width: 50%;
+      border: 3px solid green;
+      padding: 10px;
+    }
+
+    .overlay {
+      background-color: #00ff80;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue
new file mode 100644
index 0000000000..8819f09120
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/modals/test-base-id-modal.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="base-id-modal">
+    <BaseIdModalOpen modalId="myModal">Open</BaseIdModalOpen>
+    <BaseIdModal :animation="Fade" modalId="myModal" contentClass="content" overlayClass="overlay">
+      <h1>Hello</h1>
+      <p>The base id modal is working</p>
+      <BaseIdModalClose modalId="myModal">Close</BaseIdModalClose>
+    </BaseIdModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BaseIdModal from '../../../../x-components/src/components/modals/base-id-modal.vue';
+  import BaseIdModalOpen from '../../../../x-components/src/components/modals/base-id-modal-open.vue';
+  import BaseIdModalClose from '../../../../x-components/src/components/modals/base-id-modal-close.vue';
+  import Fade from '../../../../x-components/src/components/animations/fade.vue';
+</script>
+
+<style>
+  .base-id-modal {
+    .content {
+      background: white;
+      margin: auto;
+      width: 50%;
+      border: 3px solid green;
+      padding: 10px;
+    }
+
+    .overlay {
+      background-color: red;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index d40529c6d0..ee2b75b2bc 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -24,10 +24,15 @@ import {
   TestSlidingPanel,
   TestBaseSuggestions,
   TestHighlight,
+  TestHistoryQueries,
+  TestMyHistory,
   TestBaseResultImages,
   TestBasePanel,
   TestBaseKeyboardNavigation,
-  TestRelatedTags
+  TestRelatedTags,
+  TestPartialResultsList,
+  TestBaseEventsModal,
+  TestBaseIdModal
 } from './';
 
 const routes = [
@@ -151,6 +156,16 @@ const routes = [
     name: 'Highlight',
     component: TestHighlight
   },
+  {
+    path: '/history-queries',
+    name: 'HistoryQueries',
+    component: TestHistoryQueries
+  },
+  {
+    path: '/my-history',
+    name: 'MyHistory',
+    component: TestMyHistory
+  },
   {
     path: '/base-result-images',
     name: 'BaseResultImages',
@@ -170,6 +185,21 @@ const routes = [
     path: '/related-tags',
     name: 'RelatedTags',
     component: TestRelatedTags
+  },
+  {
+    path: '/partial-results-list',
+    name: 'PartialResultsList',
+    component: TestPartialResultsList
+  },
+  {
+    path: '/base-events-modal',
+    name: 'BaseEventsModal',
+    component: TestBaseEventsModal
+  },
+  {
+    path: '/test-base-id-modal',
+    name: 'TestBaseIdModal',
+    component: TestBaseIdModal
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts b/packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts
new file mode 100644
index 0000000000..b13804333c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts
@@ -0,0 +1,2 @@
+export { default as TestHistoryQueries } from './test-history-queries.vue';
+export { default as TestMyHistory } from './test-my-history.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue
new file mode 100644
index 0000000000..6d9928394e
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue
@@ -0,0 +1,16 @@
+<template>
+  <SearchInput :maxLength="10" />
+  <ClearSearchInput />
+
+  <HistoryQueries :maxItemsToRender="5" />
+  <ClearHistoryQueries class="x-button--ghost x-button--ghost-start">
+    <span>Clear previous searches</span>
+  </ClearHistoryQueries>
+</template>
+
+<script setup>
+  import HistoryQueries from '../../../../../x-components/src/x-modules/history-queries/components/history-queries.vue';
+  import ClearHistoryQueries from '../../../../../x-components/src/x-modules/history-queries/components/clear-history-queries.vue';
+  import ClearSearchInput from '../../../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue
new file mode 100644
index 0000000000..bd1eea8d94
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue
@@ -0,0 +1,33 @@
+<template>
+  <MyHistory v-if="_$x.isHistoryQueriesEnabled && _$x.fullHistoryQueries.length">
+    <template #date="{ date }">
+      <div>{{ date }}</div>
+    </template>
+
+    <template #suggestion="{ suggestion, formatTime }">
+      <HistoryQuery data-test="my-history-query" :suggestion="suggestion">
+        <div class="flex flex-row gap-8">
+          <p>{{ suggestion.query }}</p>
+
+          <p>
+            {{ formatTime(suggestion.timestamp) }}
+          </p>
+        </div>
+
+        <template #remove-button-content>
+          <span>x</span>
+        </template>
+      </HistoryQuery>
+    </template>
+  </MyHistory>
+</template>
+
+<script setup>
+  import HistoryQuery from '../../../../../x-components/src/x-modules/history-queries/components/history-query.vue';
+  import MyHistory from '../../../../../x-components/src/x-modules/history-queries/components/my-history.vue';
+  import { use$x } from '../../../../../x-components/src/composables/use-$x';
+
+  const _$x = use$x();
+</script>
+
+<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/index.ts b/packages/_vue3-migration-test/src/x-modules/history-queries/index.ts
new file mode 100644
index 0000000000..07635cbbc8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index 77e40483c6..5c21a8ab4f 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -6,3 +6,4 @@ export * from './search-box';
 export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';
 export * from './related-tags';
+export * from './history-queries';
diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/index.ts b/packages/_vue3-migration-test/src/x-modules/search/components/index.ts
index 32ee402482..b1a112de7d 100644
--- a/packages/_vue3-migration-test/src/x-modules/search/components/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/search/components/index.ts
@@ -1,3 +1,4 @@
 export { default as TestSortDropdown } from './test-sort-dropdown.vue';
 export { default as TestSortList } from './test-sort-list.vue';
 export { default as TestSortPickerList } from './test-sort-picker-list.vue';
+export { default as TestPartialResultsList } from './test-partial-results-list.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-partial-results-list.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-partial-results-list.vue
new file mode 100644
index 0000000000..463b8cca0b
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search/components/test-partial-results-list.vue
@@ -0,0 +1,50 @@
+<template>
+  <PartialResultsList>
+    <template #default="{ partialResult }">
+      <span data-test="partial-query">{{ partialResult.query }}</span>
+      <BaseGrid #result="{ item }" :columns="4" :items="partialResult.results">
+        {{ item.id }}
+      </BaseGrid>
+      <PartialQueryButton :query="partialResult.query">
+        <template #default="{ query }">Ver todos {{ query }}</template>
+      </PartialQueryButton>
+    </template>
+  </PartialResultsList>
+
+  <div v-if="clickPartialQueryButton" class="text-content">
+    <span>The user has clicked on a partial query button!!</span>
+    <button @click="restartParialQueryButton" class="text-button">Restart</button>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import PartialQueryButton from '../../../../../x-components/src/x-modules/search/components/partial-query-button.vue';
+  import BaseGrid from '../../../../../x-components/src/components/base-grid.vue';
+  import PartialResultsList from '../../../../../x-components/src/x-modules/search/components/partial-results-list.vue';
+  import { use$x } from '../../../../../x-components/src/composables/use-$x';
+
+  const _x = use$x();
+
+  const clickPartialQueryButton = ref(false);
+
+  const restartParialQueryButton = () => (clickPartialQueryButton.value = false);
+
+  _x.on('UserClickedPartialQuery', false).subscribe(() => (clickPartialQueryButton.value = true));
+</script>
+
+<style>
+  .x-partial-results-list {
+    gap: 12px;
+  }
+
+  .text-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .text-button {
+    max-width: fit-content;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/x-modules/search/x-module.ts b/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
index dae572726c..2ab2f330a1 100644
--- a/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
@@ -3,6 +3,7 @@ import { getBannersStub } from '../../../../x-components/src/__stubs__/banners-s
 import { getPromotedsStub } from '../../../../x-components/src/__stubs__/promoteds-stubs.factory';
 import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
 import { SearchXModule } from '../../../../x-components/src/x-modules/search';
+import { getPartialResultsStub } from '../../../../x-components/src/__stubs__/partials-results-stubs.factory';
 
 export const searchXModule = {
   storeModule: {
@@ -11,6 +12,7 @@ export const searchXModule = {
       results: getResultsStub(10),
       promoteds: getPromotedsStub(),
       banners: getBannersStub(),
+      partialResults: getPartialResultsStub(),
       status: 'success'
     }
   }
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index c9027b2e2e..54388ff68c 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,79 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.39](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.34...@empathyco/x-components@5.0.0-alpha.39) (2024-06-11)
+
+
+### Bug Fixes
+
+* **semantic-queries:** cancel track no results query on QueryPreviewUnmounted event (#1507) ([cc6518e](https://github.com/empathyco/x/commit/cc6518efe8e00bf02240ca54e39ef77d05a3139f))
+
+
+### Continuous Integration
+
+* add token to checkout action (#1511) ([c7cd70a](https://github.com/empathyco/x/commit/c7cd70a5b6df5701b5e46b4558b82485bc40f953))
+* fix package version and remove `persist-credentials` (#1513) ([c3add80](https://github.com/empathyco/x/commit/c3add8033ac5515e715e1ffff636b6df8133bccc))
+
+
+
+## [5.0.0-alpha.38](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.37...@empathyco/x-components@5.0.0-alpha.38) (2024-06-11)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+## [5.0.0-alpha.37](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.36...@empathyco/x-components@5.0.0-alpha.37) (2024-06-10)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+## [5.0.0-alpha.36](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.35...@empathyco/x-components@5.0.0-alpha.36) (2024-06-10)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+## [5.0.0-alpha.35](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.34...@empathyco/x-components@5.0.0-alpha.35) (2024-06-07)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+## [5.0.0-alpha.34](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.33...@empathyco/x-components@5.0.0-alpha.34) (2024-06-06)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+## [5.0.0-alpha.33](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.32...@empathyco/x-components@5.0.0-alpha.33) (2024-06-05)
+
+
+### Code Refactoring
+
+* **keyboard-navigation:** use xBus only (#1502) ([8bb3c60](https://github.com/empathyco/x/commit/8bb3c604f308598a124719345bb4cf15a4d83103))
+
+
+
+## [5.0.0-alpha.32](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.31...@empathyco/x-components@5.0.0-alpha.32) (2024-06-05)
+
+
+### Features
+
+* migrate PartialQueryButton and PartialResultsList (#1501) ([5e87123](https://github.com/empathyco/x/commit/5e87123d4a6c1edeb05f83c31ee8f096b5558e0f))
+
+
+
+## [5.0.0-alpha.31](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.30...@empathyco/x-components@5.0.0-alpha.31) (2024-06-04)
+
+
+### Features
+
+* migrate BaseEventsModal to composition API ([7ef04b6](https://github.com/empathyco/x/commit/7ef04b65bcef2eb9b9dc5bc107bc02823831d444))
+
+
+
+## [5.0.0-alpha.30](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.29...@empathyco/x-components@5.0.0-alpha.30) (2024-06-04)
+
+
+### Features
+
+* **base-id-modal:** migrate to composition API (#1500) ([6274c67](https://github.com/empathyco/x/commit/6274c676946536c9c1c4e54205ebda18c79b8f55))
+
+
+
 ## [5.0.0-alpha.29](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.28...@empathyco/x-components@5.0.0-alpha.29) (2024-05-31)
 
 
@@ -228,10 +301,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### ⚠ BREAKING CHANGES
 
-* **ColumnPickerMixin:** `BaseColumnPickerDropdown` component will no longer emit the `change` event, use `update:modelValue` instead. 
+* **ColumnPickerMixin:** `BaseColumnPickerDropdown` component will no longer emit the `change` event, use `update:modelValue` instead.
 `BaseColumnPickerDropdown` prop for the selected columns was renamed from `value` to `modelValue`.
 
-`BaseColumnPickerList` component will no longer emit the `change` event, use `update:modelValue` instead. 
+`BaseColumnPickerList` component will no longer emit the `change` event, use `update:modelValue` instead.
 `BaseColumnPickerList` prop for the selected columns was renamed from `value` to `modelValue`.
 
 `ColumnPickerMixin` has been removed.
@@ -300,7 +373,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### ⚠ BREAKING CHANGES
 
-* **sort-mixin:** base-dropdown component will no longer emit the `change` event, use `update:modelValue` instead. 
+* **sort-mixin:** base-dropdown component will no longer emit the `change` event, use `update:modelValue` instead.
 base-dropdown prop for the selected item was renamed from `value` to `modelValue`.
 
 ### Code Refactoring
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index db9a4826da..0a184d2e04 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.29",
+  "version": "5.0.0-alpha.39",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index 3f58af7c02..1d4a096948 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -114,7 +114,10 @@
        *
        * @internal
        */
-      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
+      const injectedListItems = inject<Ref<ListItem[]> | undefined>(
+        LIST_ITEMS_KEY as string,
+        undefined
+      );
 
       const gridEl = ref<ElementRef | HTMLElement | null>(null);
 
diff --git a/packages/x-components/src/components/base-keyboard-navigation.vue b/packages/x-components/src/components/base-keyboard-navigation.vue
index e4bf015386..f341fed1ed 100644
--- a/packages/x-components/src/components/base-keyboard-navigation.vue
+++ b/packages/x-components/src/components/base-keyboard-navigation.vue
@@ -18,7 +18,7 @@
   import { ArrowKey, EventsForDirectionLimit, TakeNavigationControl } from '../utils/types';
   import { XEventsOf } from '../wiring/events.types';
   import { WireMetadata } from '../wiring/wiring.types';
-  import { use$x, useXBus } from '../composables';
+  import { useXBus } from '../composables';
 
   /**
    * Base component to handle keyboard navigation for elements inside it. It has a required slot to
@@ -56,8 +56,6 @@
     },
     setup: function (props) {
       const el = ref<HTMLElement>();
-
-      const $x = use$x();
       const xBus = useXBus();
 
       /**
@@ -132,7 +130,7 @@
       function emitDirectionalLimitReached(direction: ArrowKey): void {
         const xEvent = props.eventsForDirectionLimit?.[direction];
         if (xEvent) {
-          $x.emit(xEvent, undefined, { target: elementToFocus });
+          xBus.emit(xEvent, undefined, { target: elementToFocus });
         }
       }
 
diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
index 4aed8568ef..a6c20def62 100644
--- a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
+++ b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
@@ -88,8 +88,8 @@
 <script lang="ts">
   import { computed, defineComponent, ref } from 'vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
-  import BaseIdModal from '../modals/base-id-modal.vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
+  import BaseIdModal from '../modals/base-id-modal.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import { useLayouts } from './use-layouts';
 
diff --git a/packages/x-components/src/components/modals/base-events-modal.vue b/packages/x-components/src/components/modals/base-events-modal.vue
index aa17adb9b0..9eae82ebc5 100644
--- a/packages/x-components/src/components/modals/base-events-modal.vue
+++ b/packages/x-components/src/components/modals/base-events-modal.vue
@@ -1,22 +1,22 @@
 <template>
   <BaseModal
+    v-bind="$attrs"
+    ref="baseModalEl"
     @click:overlay="emitBodyClickEvent"
     @focusin:body="emitBodyClickEvent"
     :animation="animation"
     :open="isOpen"
-    v-bind="$attrs"
   >
     <slot />
   </BaseModal>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { defineComponent, PropType, ref } from 'vue';
   import { XEvent } from '../../wiring/events.types';
-  import { XOn } from '../decorators/bus.decorators';
-  import { WireMetadata } from '../../wiring/wiring.types';
   import { getTargetElement, isElementEqualOrContained } from '../../utils/html';
+  import { AnimationProp } from '../../types/animation-prop';
+  import { use$x } from '../../composables/use-$x';
   import BaseModal from './base-modal.vue';
 
   /**
@@ -30,88 +30,109 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseModal }
-  })
-  export default class BaseEventsModal extends Vue {
-    /**
-     * Animation to use for opening/closing the modal.
-     */
-    @Prop()
-    public animation?: Vue | string;
-    /**
-     * Array of {@link XEvent} to listen to open the modal.
-     */
-    @Prop({ default: (): XEvent[] => ['UserClickedOpenEventsModal'] })
-    public eventsToOpenModal!: XEvent[];
-
-    /**
-     * Array of {@link XEvent} to listen to close the modal.
-     */
-    @Prop({
-      default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']
-    })
-    public eventsToCloseModal!: XEvent[];
-
-    /**
-     * Event to emit when any part of the website out of the modal has been clicked.
-     */
-    @Prop({ default: 'UserClickedOutOfEventsModal' })
-    public bodyClickEvent!: XEvent;
-
-    /**
-     * Whether the modal is open or not.
-     */
-    protected isOpen = false;
-
-    /** The element that opened the modal. */
-    protected openerElement?: HTMLElement;
-
-    /**
-     * Opens the modal.
-     *
-     * @param _payload - The payload of the event that opened the modal.
-     * @param metadata - The metadata of the event that opened the modal.
-     *
-     * @internal
-     */
-    @XOn(component => (component as BaseEventsModal).eventsToOpenModal)
-    openModal(_payload: unknown, metadata: WireMetadata): void {
-      if (!this.isOpen) {
-        this.openerElement = metadata.target;
-        this.isOpen = true;
-      }
-    }
-
-    /**
-     * Closes the modal.
-     *
-     * @internal
-     */
-    @XOn(component => (component as BaseEventsModal).eventsToCloseModal)
-    closeModal(): void {
-      if (this.isOpen) {
-        this.isOpen = false;
-      }
-    }
-
-    /**
-     * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed
-     * event target is the button that opened the modal.
-     *
-     * @param event - The event that triggered the close attempt.
-     * @public
-     */
-    protected emitBodyClickEvent(event: MouseEvent | FocusEvent): void {
-      // Prevents clicking the open button when the panel is already open to close the panel.
-      if (
-        !this.openerElement ||
-        !isElementEqualOrContained(this.openerElement, getTargetElement(event))
-      ) {
-        this.$x.emit(this.bodyClickEvent, undefined, { target: this.$el as HTMLElement });
+  export default defineComponent({
+    name: 'BaseEventsModal',
+    components: {
+      BaseModal
+    },
+    props: {
+      /**
+       * Animation to use for opening/closing the modal.
+       */
+      animation: AnimationProp,
+
+      /**
+       * Array of {@link XEvent} to listen to open the modal.
+       */
+      eventsToOpenModal: {
+        type: Array as PropType<XEvent[]>,
+        default: (): XEvent[] => ['UserClickedOpenEventsModal']
+      },
+
+      /**
+       * Array of {@link XEvent} to listen to close the modal.
+       */
+      eventsToCloseModal: {
+        type: Array as PropType<XEvent[]>,
+        default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']
+      },
+
+      /**
+       * Event to emit when any part of the website out of the modal has been clicked.
+       */
+      bodyClickEvent: {
+        type: String as PropType<XEvent>,
+        default: 'UserClickedOutOfEventsModal'
       }
+    },
+    setup(props) {
+      const $x = use$x();
+
+      /**
+       * Whether the modal is open or not.
+       */
+      const isOpen = ref(false);
+
+      /** The element that opened the modal. */
+      const openerElement = ref<HTMLElement>();
+
+      const baseModalEl = ref<HTMLElement>();
+
+      /**
+       * Opens the modal.
+       *
+       * @param _payload - The payload of the event that opened the modal.
+       * @param metadata - The metadata of the event that opened the modal.
+       *
+       * @internal
+       */
+      props.eventsToOpenModal?.forEach(event =>
+        $x.on(event, true).subscribe(({ metadata }) => {
+          if (!isOpen.value) {
+            openerElement.value = metadata.target;
+            isOpen.value = true;
+          }
+        })
+      );
+
+      /**
+       * Closes the modal.
+       *
+       * @internal
+       */
+      props.eventsToCloseModal?.forEach(event =>
+        $x.on(event, false).subscribe(() => {
+          if (isOpen.value) {
+            isOpen.value = false;
+          }
+        })
+      );
+
+      /**
+       * Emits the event defined in the {@link BaseEventsModal.bodyClickEvent} event unless the passed
+       * event target is the button that opened the modal.
+       *
+       * @param event - The event that triggered the close attempt.
+       * @public
+       */
+      const emitBodyClickEvent = (event: MouseEvent | FocusEvent) => {
+        // Prevents clicking the open button when the panel is already open to close the panel.
+        if (
+          !openerElement.value ||
+          !isElementEqualOrContained(openerElement.value, getTargetElement(event))
+        ) {
+          $x.emit(props.bodyClickEvent, undefined, { target: baseModalEl.value as HTMLElement });
+        }
+      };
+
+      return {
+        isOpen,
+        openerElement,
+        baseModalEl,
+        emitBodyClickEvent
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/components/modals/base-id-modal.vue b/packages/x-components/src/components/modals/base-id-modal.vue
index 7224bdb5b6..4525b49d41 100644
--- a/packages/x-components/src/components/modals/base-id-modal.vue
+++ b/packages/x-components/src/components/modals/base-id-modal.vue
@@ -1,21 +1,23 @@
 <template>
   <BaseModal
+    v-bind="$attrs"
+    :ref="el"
     @click:overlay="emitClickOutOfModal"
     @focusin:body="emitClickOutOfModal"
     :animation="animation"
     :open="isOpen"
-    v-bind="$attrs"
   >
     <slot />
   </BaseModal>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { XOn } from '../decorators/bus.decorators';
+  import { defineComponent, ref } from 'vue';
   import { WireMetadata } from '../../wiring/wiring.types';
   import { getTargetElement, isElementEqualOrContained } from '../../utils/html';
+  import { useXBus } from '../../composables';
+  import { AnimationProp } from '../../types/animation-prop';
+  import { XEvent } from '../../wiring/events.types';
   import BaseModal from './base-modal.vue';
 
   /**
@@ -26,71 +28,94 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseModal }
-  })
-  export default class BaseIdModal extends Vue {
-    /** Animation to use for opening/closing the modal. */
-    @Prop()
-    public animation?: Vue | string;
-
-    /** The modalId to use for the open and close event listeners. */
-    @Prop({ required: true })
-    public modalId!: string;
-
-    /** Whether the modal is open or not. */
-    protected isOpen = false;
-
-    /** The element that opened the modal. */
-    protected openerElement?: HTMLElement;
-
-    /**
-     * Opens the modal.
-     *
-     * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.
-     * @param metadata - The metadata of the emitted event.
-     * @public
-     */
-    @XOn('UserClickedOpenModal')
-    openModal(modalId: string, metadata: WireMetadata): void {
-      if (!this.isOpen && this.modalId === modalId) {
-        this.openerElement = metadata.target;
-        this.isOpen = true;
+  export default defineComponent({
+    name: 'BaseIdModal',
+    components: { BaseModal },
+    props: {
+      /**
+       * Animation to use for opening/closing the modal.
+       */
+      animation: {
+        type: AnimationProp
+      },
+      /**
+       * The modalId to use for the open and close event listeners.
+       */
+      modalId: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      /** The element that opened the modal. */
+      let openerElement: HTMLElement | undefined;
+
+      /** Whether the modal is open or not. */
+      const isOpen = ref(false);
+
+      const el = ref<HTMLElement>();
+
+      const closeModalEvents: XEvent[] = ['UserClickedCloseModal', 'UserClickedOutOfModal'];
+
+      const xBus = useXBus();
+
+      /**
+       * Opens the modal.
+       *
+       * @param modalId - The payload of the {@link XEventsTypes.UserClickedOpenModal} event.
+       * @param metadata - The metadata of the emitted event.
+       * @public
+       */
+      function openModal(modalId: string, metadata: WireMetadata): void {
+        if (!isOpen.value && props.modalId === modalId) {
+          openerElement = metadata.target;
+          isOpen.value = true;
+        }
       }
-    }
 
-    /**
-     * Closes the modal.
-     *
-     * @param payload - The payload of the closing events:
-     * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.
-     *
-     * @public
-     */
-    @XOn(['UserClickedCloseModal', 'UserClickedOutOfModal'])
-    closeModal(payload: string): void {
-      if (this.isOpen && this.modalId === payload) {
-        this.isOpen = false;
+      /**
+       * Closes the modal.
+       *
+       * @param payload - The payload of the closing events:
+       * {@link XEventsTypes.UserClickedCloseModal} or {@link XEventsTypes.UserClickedOutOfModal}.
+       *
+       * @public
+       */
+      function closeModal(payload: string): void {
+        if (isOpen.value && props.modalId === payload) {
+          isOpen.value = false;
+        }
       }
-    }
 
-    /**
-     * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target
-     * is the button that opened the modal.
-     *
-     * @param event - The event that triggered the close attempt.
-     * @public
-     */
-    protected emitClickOutOfModal(event: MouseEvent | FocusEvent): void {
-      // Prevents clicking the open button when the panel is already open to close the panel.
-      if (
-        !this.openerElement ||
-        !isElementEqualOrContained(this.openerElement, getTargetElement(event))
-      ) {
-        this.$x.emit('UserClickedOutOfModal', this.modalId, { target: this.$el as HTMLElement });
+      /**
+       * Emits a {@link XEventsTypes.UserClickedOutOfModal} event unless the passed event target
+       * is the button that opened the modal.
+       *
+       * @param event - The event that triggered the close attempt.
+       * @public
+       */
+      function emitClickOutOfModal(event: MouseEvent | FocusEvent): void {
+        // Prevents clicking the open button when the panel is already open to close the panel.
+        if (!openerElement || !isElementEqualOrContained(openerElement, getTargetElement(event))) {
+          xBus.emit('UserClickedOutOfModal', props.modalId, { target: el.value as HTMLElement });
+        }
       }
+
+      xBus
+        .on('UserClickedOpenModal', true)
+        .subscribe(({ eventPayload, metadata }) => openModal(eventPayload, metadata));
+
+      closeModalEvents.forEach(event => {
+        xBus.on(event, false).subscribe(eventPayload => closeModal(eventPayload as string));
+      });
+
+      return {
+        el,
+        isOpen,
+        emitClickOutOfModal
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/composables/__tests__/use-getter.spec.ts b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
index 804fbbd5e0..3c103d9160 100644
--- a/packages/x-components/src/composables/__tests__/use-getter.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
@@ -1,72 +1,49 @@
-import { ComputedRef, defineComponent } from 'vue';
-import Vuex, { Store } from 'vuex';
-import { createLocalVue, mount } from '@vue/test-utils';
-import { Dictionary } from '@empathyco/x-utils';
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { useGetter } from '../use-getter';
-import { historyQueriesXStoreModule } from '../../x-modules/history-queries';
-import { AnyXStoreModule } from '../../store/index';
+import { useRegisterXModule } from '../use-register-x-module';
 import { ExtractGetters } from '../../x-modules/x-modules.types';
-
-const renderUseGetterTest = (getters: string[]): renderUseGetterTestAPI => {
-  const testComponent = defineComponent({
-    setup() {
-      const historyQueriesGetter = useGetter(
-        'historyQueries',
-        getters as (keyof ExtractGetters<'historyQueries'>)[]
-      );
-      return {
-        historyQueriesGetter
-      };
-    }
-  });
-
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
-  const store = new Store({
-    modules: {
-      x: {
-        namespaced: true,
-        modules: {
-          historyQueries: { namespaced: true, ...historyQueriesXStoreModule } as AnyXStoreModule
-        }
-      }
-    }
+import { useStore } from '../use-store';
+import { XPlugin } from '../../plugins';
+import { historyQueriesXModule } from '../../x-modules/history-queries/x-module';
+
+jest.mock('../use-store');
+
+function render(modulePaths: (keyof ExtractGetters<'historyQueries'>)[]) {
+  installNewXPlugin();
+  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
+
+  const component = defineComponent({
+    xModule: 'historyQueries',
+    setup: () => {
+      useRegisterXModule(historyQueriesXModule);
+      const historyQueriesGetter = useGetter('historyQueries', modulePaths);
+      return { historyQueriesGetter };
+    },
+    template: `<div/>`
   });
-  installNewXPlugin({ store }, localVue);
 
-  const wrapper = mount(testComponent, {
-    localVue,
-    store
-  });
+  const wrapper = mount(component);
 
-  return {
-    store,
-    historyQueriesGetter: (wrapper.vm as any).historyQueriesGetter
-  };
-};
+  return (wrapper as any).vm.historyQueriesGetter;
+}
 
 describe('testing useGetter composable', () => {
   it('maps store getters', () => {
-    const { historyQueriesGetter, store } = renderUseGetterTest(['storageKey', 'historyQueries']);
-    expect(historyQueriesGetter.storageKey.value).toEqual('history-queries');
-    expect(historyQueriesGetter.historyQueries.value).toHaveLength(0);
+    const { storageKey, historyQueries } = render(['storageKey', 'historyQueries']);
+    expect(storageKey.value).toEqual('history-queries');
+    expect(historyQueries.value).toHaveLength(0);
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    store.dispatch('x/historyQueries/addQueryToHistory', 'chorizo');
+    XPlugin.store.dispatch('x/historyQueries/addQueryToHistory', 'chorizo');
 
-    expect(historyQueriesGetter.historyQueries.value).toHaveLength(1);
+    expect(historyQueries.value).toHaveLength(1);
   });
 
   it('does not return not requested getters', () => {
-    const { historyQueriesGetter } = renderUseGetterTest(['storageKey']);
-    expect(historyQueriesGetter.storageKey).toBeDefined();
-    expect(historyQueriesGetter.historyQueries).toBeUndefined();
+    const { storageKey, historyQueries } = render(['storageKey']);
+    expect(storageKey).toBeDefined();
+    expect(historyQueries).toBeUndefined();
   });
 });
-
-type renderUseGetterTestAPI = {
-  historyQueriesGetter: Dictionary<ComputedRef<string[]>>;
-  store: Store<any>;
-};
diff --git a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
index dfa8de8c27..b30d3b6a6a 100644
--- a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
@@ -13,15 +13,12 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * A button that when is pressed, emits the
@@ -30,51 +27,57 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class ClearHistoryQueries extends Vue {
-    /**
-     * The whole history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
+  export default defineComponent({
+    name: 'ClearHistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    setup() {
+      /**
+       * The whole history queries.
+       *
+       * @internal
+       */
+      const { historyQueries } = useState('historyQueries', ['historyQueries']);
 
-    /**
-     * Returns if the array of history queries is empty.
-     *
-     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
-     * @internal
-     */
-    protected get isHistoryQueriesEmpty(): boolean {
-      return this.historyQueries.length === 0;
-    }
+      /**
+       * Returns if the array of history queries is empty.
+       *
+       * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
+       * @internal
+       */
+      const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0);
+
+      /**
+       * Dynamic CSS classes to add to the root element of this component.
+       *
+       * @returns A booleans dictionary where each key is the class name to add, and the boolean value
+       * tells if it should be added or not.
+       * @internal
+       */
+      const dynamicClasses = computed(
+        (): VueCSSClasses => ({
+          'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value
+        })
+      );
+
+      /**
+       * The list of events that are going to be emitted when the button is pressed.
+       *
+       * @internal
+       */
+      const clearHistoryQueriesEvents: Partial<XEventsTypes> = {
+        UserPressedClearHistoryQueries: undefined
+      };
 
-    /**
-     * Dynamic CSS classes to add to the root element of this component.
-     *
-     * @returns A booleans dictionary where each key is the class name to add, and the boolean value
-     * tells if it should be added or not.
-     * @internal
-     */
-    protected get dynamicClasses(): VueCSSClasses {
       return {
-        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty
+        dynamicClasses,
+        clearHistoryQueriesEvents,
+        isHistoryQueriesEmpty
       };
     }
-
-    /**
-     * The list of events that are going to be emitted when the button is pressed.
-     *
-     * @internal
-     */
-    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {
-      UserPressedClearHistoryQueries: undefined
-    };
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
index f32ea08109..44026e2fc9 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
@@ -3,14 +3,13 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { computed, defineComponent } from 'vue';
   import { HistoryQuery } from '@empathyco/x-types';
   import BaseSwitch from '../../../components/base-switch.vue';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * History Queries Switch is a component to activate or deactivate the history queries.
@@ -18,49 +17,55 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(historyQueriesXModule)],
-    components: { BaseSwitch }
-  })
-  export default class HistoryQueriesSwitch extends Vue {
-    /**
-     * A boolean with the isEnabled value coming from the store state.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'isEnabled')
-    public isEnabled!: boolean;
-
-    /**
-     * The history queries from the state.
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * Checks if there are history queries.
-     *
-     * @returns True if there are history queries; false otherwise.
-     */
-    protected get hasHistoryQueries(): boolean {
-      return !isArrayEmpty(this.historyQueries);
-    }
+  export default defineComponent({
+    name: 'HistoryQueriesSwitch',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseSwitch
+    },
+    setup() {
+      const $x = use$x();
+
+      /**
+       * An object with the isEnabled value and the history queries coming from the store state.
+       *
+       * @internal
+       */
+      const { isEnabled, historyQueries } = useState('historyQueries', [
+        'isEnabled',
+        'historyQueries'
+      ]);
+
+      /**
+       * Checks if there are history queries.
+       *
+       * @returns True if there are history queries; false otherwise.
+       */
+      const hasHistoryQueries = computed(
+        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])
+      );
 
-    /**
-     * Emits an event based on the switch state.
-     *
-     * @internal
-     */
-    protected toggle(): void {
-      this.$x.emit(
-        this.isEnabled
-          ? this.hasHistoryQueries
-            ? 'UserClickedDisableHistoryQueries'
-            : 'UserClickedConfirmDisableHistoryQueries'
-          : 'UserClickedEnableHistoryQueries'
+      const disableEvent = computed(() =>
+        hasHistoryQueries.value
+          ? 'UserClickedDisableHistoryQueries'
+          : 'UserClickedConfirmDisableHistoryQueries'
       );
+
+      /**
+       * Emits an event based on the switch state.
+       *
+       * @internal
+       */
+      const toggle = (): void => {
+        $x.emit(isEnabled.value ? disableEvent.value : 'UserClickedEnableHistoryQueries');
+      };
+
+      return {
+        toggle,
+        isEnabled
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
index fd5fd310a5..1243fc01f6 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseSuggestions
     v-bind="$attrs"
-    :suggestions="historyQueries"
+    :suggestions="historyQueriesWithResults"
     class="x-history-queries"
     data-test="history-queries"
   >
@@ -47,13 +47,10 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { historyQueriesXModule } from '../x-module';
+  import { useGetter } from '../../../composables/use-getter';
   import HistoryQuery from './history-query.vue';
 
   /**
@@ -63,20 +60,29 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'HistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseSuggestions,
+      HistoryQuery
+    },
     inheritAttrs: false,
-    components: { BaseSuggestions, HistoryQuery },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class HistoryQueries extends Vue {
-    /**
-     * The filtered list of history queries.
-     *
-     * @internal
-     */
-    @Getter('historyQueries', 'historyQueriesWithResults')
-    public historyQueries!: HistoryQueryModel[];
-  }
+    setup() {
+      /**
+       * The filtered list of history queries.
+       *
+       * @internal
+       */
+      const { historyQueriesWithResults } = useGetter('historyQueries', [
+        'historyQueriesWithResults'
+      ]);
+
+      return {
+        historyQueriesWithResults
+      };
+    }
+  });
 </script>
 
 <!--eslint-disable max-len -->
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-query.vue b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
index 05736a0649..e3450665c0 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
@@ -40,14 +40,11 @@
 
 <script lang="ts">
   import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';
-  import { Component, Mixins, Prop } from 'vue-property-decorator';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import Highlight from '../../../components/highlight.vue';
+  import { computed, defineComponent, PropType } from 'vue';
   import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
-  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';
+  import { useGetter } from '../../../composables/use-getter';
   import RemoveHistoryQuery from './remove-history-query.vue';
 
   /**
@@ -57,41 +54,52 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(historyQueriesXModule)],
-    components: { Highlight, RemoveHistoryQuery, BaseSuggestion }
-  })
-  export default class HistoryQuery extends Mixins(
-    dynamicPropsMixin(['removeButtonClass', 'suggestionClass'])
-  ) {
-    /**
-     * The history query suggestion to render.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected suggestion!: HistoryQueryModel;
-
-    /**
-     * The normalized query of the history-queries module.
-     *
-     * @internal
-     */
-    @Getter('historyQueries', 'normalizedQuery')
-    public query!: string;
-
-    /**
-     * The list of events that are going to be emitted when the suggestion button is pressed.
-     *
-     * @internal
-     * @returns The {@link XEvent} to emit.
-     */
-    protected get suggestionSelectedEvents(): Partial<XEventsTypes> {
+  export default defineComponent({
+    name: 'HistoryQuery',
+    xModule: historyQueriesXModule.name,
+    components: { RemoveHistoryQuery, BaseSuggestion },
+    props: {
+      /**
+       * The history query suggestion to render.
+       *
+       * @public
+       */
+      suggestion: {
+        type: Object as PropType<HistoryQueryModel>,
+        required: true
+      },
+      /** Class inherited by content element. */
+      removeButtonClass: String,
+      /** Class inherited by content element. */
+      suggestionClass: String
+    },
+    emits: ['click'],
+    setup(props) {
+      /**
+       * The normalized query of the history-queries module.
+       *
+       * @internal
+       */
+      const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;
+
+      /**
+       * The list of events that are going to be emitted when the suggestion button is pressed.
+       *
+       * @internal
+       * @returns The {@link XEvent} to emit.
+       */
+      const suggestionSelectedEvents = computed(
+        (): Partial<XEventsTypes> => ({
+          UserSelectedAHistoryQuery: props.suggestion
+        })
+      );
+
       return {
-        UserSelectedAHistoryQuery: this.suggestion
+        query,
+        suggestionSelectedEvents
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index 8f7135c2ec..c789d4a3bd 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -57,18 +57,16 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery } from '@empathyco/x-types';
+  import { HistoryQuery as HistoryQueryType } from '@empathyco/x-types';
   import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Inject, Prop } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent, inject } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
   import { groupItemsBy, isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { historyQueriesXModule } from '../x-module';
-  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';
-  import HistoryQueryComponent from './history-query.vue';
+  import { AnimationProp } from '../../../types/index';
+  import { useState } from '../../../composables/use-state';
+  import HistoryQuery from './history-query.vue';
 
   /**
    * The component renders the full history of user searched queries grouped by the day
@@ -81,117 +79,131 @@
    * made in the past.
    * @public
    */
-  @Component({
-    components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },
-    mixins: [xComponentMixin(historyQueriesXModule), dynamicPropsMixin(['queriesListClass'])]
-  })
-  export default class MyHistory extends Vue {
-    /**
-     * Animation component that will be used to animate the suggestions.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-
-    /**
-     * The current locale.
-     *
-     * @public
-     */
-    @Prop({ default: 'en' })
-    protected locale!: string;
-
-    /**
-     * The list of history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * The provided {@link SnippetConfig}.
-     *
-     * @internal
-     */
-    @Inject('snippetConfig')
-    public snippetConfig?: SnippetConfig;
-
-    /**
-     * Returns a record of history queries grouped by date.
-     *
-     * @example
-     * ```typescript
-     *  const historyQueriesGrouped = {
-     *    'Monday, January 10th, 2022' : [{
-     *      query: 'lego',
-     *      modelName: 'HistoryQuery',
-     *      timestamp: 121312312
-     *    }],
-     *    'Tuesday, January 11th, 2022' : [{
-     *      query: 'barbie',
-     *      modelName: 'HistoryQuery',
-     *      timestamp: 15221212
-     *    }]
-     *  }
-     * ```
-     * @returns The history queries grouped by date.
-     * @internal
-     */
-    protected get groupByDate(): Dictionary<HistoryQuery[]> {
-      return groupItemsBy(this.historyQueries, current => {
-        return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {
-          day: 'numeric',
-          weekday: 'long',
-          month: 'long',
-          year: 'numeric'
+  export default defineComponent({
+    name: 'MyHistory',
+    xModule: historyQueriesXModule.name,
+    components: {
+      HistoryQuery,
+      BaseSuggestions
+    },
+    props: {
+      /**
+       * Animation component that will be used to animate the suggestions.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+      /**
+       * The current locale.
+       *
+       * @public
+       */
+      locale: {
+        type: String,
+        default: 'en'
+      },
+      /** Class inherited by content element. */
+      queriesListClass: String
+    },
+    setup(props) {
+      /**
+       * The list of history queries.
+       *
+       * @internal
+       */
+      const { historyQueries } = useState('historyQueries', ['historyQueries']);
+
+      /**
+       * The provided {@link SnippetConfig}.
+       *
+       * @internal
+       */
+      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');
+
+      /**
+       * The locale that it is going to be used. It can be the one send it by the snippet config or
+       * the one pass it using the prop.
+       *
+       * @returns The locale to be used.
+       * @internal
+       */
+      const usedLocale = computed(() => snippetConfig?.lang ?? props.locale);
+
+      /**
+       * Returns a record of history queries grouped by date.
+       *
+       * @example
+       * ```typescript
+       *  const historyQueriesGrouped = {
+       *    'Monday, January 10th, 2022' : [{
+       *      query: 'lego',
+       *      modelName: 'HistoryQuery',
+       *      timestamp: 121312312
+       *    }],
+       *    'Tuesday, January 11th, 2022' : [{
+       *      query: 'barbie',
+       *      modelName: 'HistoryQuery',
+       *      timestamp: 15221212
+       *    }]
+       *  }
+       * ```
+       * @returns The history queries grouped by date.
+       * @internal
+       */
+      const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {
+        return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {
+          return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
+            day: 'numeric',
+            weekday: 'long',
+            month: 'long',
+            year: 'numeric'
+          });
         });
       });
-    }
 
-    /**
-     * Formats a timestamp into `hh:mm [PM/AM]` format.
-     *
-     * @example
-     * ```typescript
-     * // locale 'es'
-     * console.log(formatTime(Date.now()) // '16:54'.
-     *
-     * // locale 'en'
-     * console.log(formatTime(Date.now()) // '16:54 PM'.
-     * ```
-     * @param timestamp - The timestamp to format.
-     * @returns The formatted time.
-     * @internal
-     */
-    protected formatTime(timestamp: number): string {
-      return new Date(timestamp).toLocaleTimeString(this.usedLocale, {
-        hour: '2-digit',
-        minute: '2-digit'
-      });
-    }
-    /**
-     * The `hasHistoryQueries` computed property is a flag representing if there are history queries
-     * stored.
-     *
-     * @returns True if there are history queries; false otherwise.
-     * @internal
-     */
-    protected get hasHistoryQueries(): boolean {
-      return !isArrayEmpty(this.historyQueries);
-    }
-    /**
-     * The locale that it is going to be used. It can be the one send it by the snippet config or
-     * the one pass it using the prop.
-     *
-     * @returns The locale to be used.
-     * @internal
-     */
-    protected get usedLocale(): string {
-      return this.snippetConfig?.lang ?? this.locale;
+      /**
+       * Formats a timestamp into `hh:mm [PM/AM]` format.
+       *
+       * @example
+       * ```typescript
+       * // locale 'es'
+       * console.log(formatTime(Date.now()) // '16:54'.
+       *
+       * // locale 'en'
+       * console.log(formatTime(Date.now()) // '16:54 PM'.
+       * ```
+       * @param timestamp - The timestamp to format.
+       * @returns The formatted time.
+       * @internal
+       */
+      const formatTime = (timestamp: number) =>
+        new Date(timestamp).toLocaleTimeString(usedLocale.value, {
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+
+      /**
+       * The `hasHistoryQueries` computed property is a flag representing if there are history queries
+       * stored.
+       *
+       * @returns True if there are history queries; false otherwise.
+       * @internal
+       */
+      const hasHistoryQueries = computed(
+        () => !isArrayEmpty(historyQueries.value as HistoryQueryType[])
+      );
+
+      return {
+        hasHistoryQueries,
+        groupByDate,
+        historyQueries,
+        formatTime
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
index da87982a90..54b15f8add 100644
--- a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
@@ -11,10 +11,8 @@
 
 <script lang="ts">
   import { HistoryQuery } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, PropType } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
 
@@ -25,32 +23,42 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class RemoveHistoryQuery extends Vue {
-    /**
-     * The historyQuery that will be removed when clicking the clear button.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected historyQuery!: HistoryQuery;
+  export default defineComponent({
+    name: 'RemoveHistoryQuery',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    props: {
+      /**
+       * The historyQuery that will be removed when clicking the clear button.
+       *
+       * @public
+       */
+      historyQuery: {
+        type: Object as PropType<HistoryQuery>,
+        required: true
+      }
+    },
+    setup(props) {
+      /**
+       * The event handler that will be triggered when clicking on the clear history query button.
+       *
+       * @remarks
+       * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
+       *
+       * @returns The {@link XEvent} to emit.
+       * @public
+       */
+      const removeHistoryQueryEvent = computed(
+        (): Partial<XEventsTypes> => ({ UserPressedRemoveHistoryQuery: props.historyQuery })
+      );
 
-    /**
-     * The event handler that will be triggered when clicking on the clear history query button.
-     *
-     * @remarks
-     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
-     *
-     * @returns The {@link XEvent} to emit.
-     * @public
-     */
-    protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {
-      return { UserPressedRemoveHistoryQuery: this.historyQuery };
+      return {
+        removeHistoryQueryEvent
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/x-module.ts b/packages/x-components/src/x-modules/history-queries/x-module.ts
index 76e8a50e83..6d5b90e982 100644
--- a/packages/x-components/src/x-modules/history-queries/x-module.ts
+++ b/packages/x-components/src/x-modules/history-queries/x-module.ts
@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { historyQueriesEmitters } from './store/emitters';
 import { historyQueriesXStoreModule } from './store/module';
@@ -23,3 +24,5 @@ export const historyQueriesXModule: HistoryQueriesXModule = {
   storeEmitters: historyQueriesEmitters,
   wiring: historyQueriesWiring
 };
+
+XPlugin.registerXModule(historyQueriesXModule);
diff --git a/packages/x-components/src/x-modules/search/components/partial-query-button.vue b/packages/x-components/src/x-modules/search/components/partial-query-button.vue
index df942bd6ab..3aaa0f5e94 100644
--- a/packages/x-components/src/x-modules/search/components/partial-query-button.vue
+++ b/packages/x-components/src/x-modules/search/components/partial-query-button.vue
@@ -1,5 +1,6 @@
 <template>
   <button
+    ref="partialButtonEl"
     @click="emitEvents"
     class="x-partial-query-button x-button"
     data-test="partial-query-button"
@@ -9,11 +10,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { defineComponent, ref } from 'vue';
   import { WireMetadata } from '../../../wiring/wiring.types';
   import { searchXModule } from '../x-module';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { use$x } from '../../../composables/use-$x';
 
   /**
    * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
@@ -22,41 +23,54 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule)]
-  })
-  export default class PartialQueryButton extends Vue {
-    /**
-     * The query property.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public query!: string;
-
-    /**
-     * Generates the {@link WireMetadata} object omitting the moduleName.
-     *
-     * @returns The {@link WireMetadata} object omitting the moduleName.
-     * @internal
-     */
-    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {
-      return {
-        target: this.$el as HTMLElement,
+  export default defineComponent({
+    name: 'PartialQueryButton',
+    xModule: searchXModule.name,
+    props: {
+      /**
+       * The query property.
+       *
+       * @public
+       */
+      query: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      useRegisterXModule(searchXModule);
+
+      const $x = use$x();
+
+      const partialButtonEl = ref<HTMLElement>();
+
+      /**
+       * Generates the {@link WireMetadata} object omitting the moduleName.
+       *
+       * @returns The {@link WireMetadata} object omitting the moduleName.
+       * @internal
+       */
+      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({
+        target: partialButtonEl.value,
         feature: 'partial_result'
+      });
+
+      /**
+       * Emits events when the button is clicked.
+       *
+       * @public
+       */
+      const emitEvents = () => {
+        $x.emit('UserAcceptedAQuery', props.query, createEventMetadata());
+        $x.emit('UserClickedPartialQuery', props.query, createEventMetadata());
       };
-    }
 
-    /**
-     * Emits events when the button is clicked.
-     *
-     * @public
-     */
-    protected emitEvents(): void {
-      this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());
-      this.$x.emit('UserClickedPartialQuery', this.query, this.createEventMetadata());
+      return {
+        partialButtonEl,
+        emitEvents
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/search/components/partial-results-list.vue b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
index 9149976609..934d84a7f2 100644
--- a/packages/x-components/src/x-modules/search/components/partial-results-list.vue
+++ b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
@@ -23,11 +23,11 @@
 
 <script lang="ts">
   import { PartialResult } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { computed, ComputedRef, defineComponent } from 'vue';
   import { searchXModule } from '../x-module';
+  import { AnimationProp } from '../../../types/animation-prop';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * It renders a list of partial results from {@link SearchState.partialResults} by default.
@@ -35,42 +35,56 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule)]
-  })
-  export default class PartialResultsList extends Vue {
-    /**
-     * Animation component that will be used to animate the partial results.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-    /**
-     * The partials results from the search state.
-     *
-     * @public
-     */
-    @State('search', 'partialResults')
-    public items!: PartialResult[];
-    /**
-     * Maximum number of partial results to show.
-     *
-     * @public
-     */
-    @Prop({ default: 5 })
-    protected maxItemsToRender!: number;
-    /**
-     * A limited number of partial results.
-     *
-     * @returns The partial results sliced by the maxItemsToRender.
-     *
-     * @internal
-     */
-    protected get partialResults(): PartialResult[] {
-      return this.items.slice(0, this.maxItemsToRender);
+  export default defineComponent({
+    name: 'PartialResultsList',
+    xModule: searchXModule.name,
+    props: {
+      /**
+       * Animation component that will be used to animate the partial results.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+
+      /**
+       * Maximum number of partial results to show.
+       *
+       * @public
+       */
+      maxItemsToRender: {
+        type: Number,
+        default: 5
+      }
+    },
+    setup(props) {
+      useRegisterXModule(searchXModule);
+
+      /**
+       * The partials results from the search state.
+       *
+       * @public
+       */
+      const items: ComputedRef<PartialResult[]> = useState('search', [
+        'partialResults'
+      ]).partialResults;
+
+      /**
+       * A limited number of partial results.
+       *
+       * @returns The partial results sliced by the maxItemsToRender.
+       *
+       * @internal
+       */
+      const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));
+
+      return {
+        partialResults
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/tagging/wiring.ts b/packages/x-components/src/x-modules/tagging/wiring.ts
index afe3886116..91674748f7 100644
--- a/packages/x-components/src/x-modules/tagging/wiring.ts
+++ b/packages/x-components/src/x-modules/tagging/wiring.ts
@@ -227,7 +227,8 @@ export const trackNoResultsQueryWithSemanticsWire = filter(
  */
 export const trackNoResultsQueryWithSemanticsWireDebounced = moduleDebounce(
   trackNoResultsQueryWithSemanticsWire,
-  ({ state }) => state.config.queryTaggingDebounceMs
+  ({ state }) => state.config.queryTaggingDebounceMs,
+  { cancelOn: 'QueryPreviewUnmounted' }
 );
 
 /**