diff --git a/.github/workflows/edocs-preview.yaml b/.github/workflows/edocs-preview.yaml
deleted file mode 100644
index 7b1a125075..0000000000
--- a/.github/workflows/edocs-preview.yaml
+++ /dev/null
@@ -1,21 +0,0 @@
-name: EPDocs - Static Content Web Preview
-on:
-  pull_request:
-    paths:
-      - packages/x-components/static-docs/**
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref_name }}
-  cancel-in-progress: true
-jobs:
-  preview-edocs:
-    if: "! github.event.pull_request.head.repo.fork"
-    uses: empathyco/platform-reusable-github-actions/.github/workflows/edocs-preview.yml@main
-    with:
-      runner: ubuntu-latest
-      teamRepo: 'x'
-      branch: ${{ github.head_ref }}
-      prNum: ${{ github.event.pull_request.number }}
-      prMessage: 'This is a link to Empathy Platform Docs Portal preview in a development environment. \n ⚠️ Only for Empathy members. We’re sorry for the inconvenience!\n'
-    secrets:
-      GH_TOKEN: ${{ secrets.SUPPORT_TOKEN }}
-      JIRA_TOKEN: '${{ secrets.JIRA_USER_EMAIL }}:${{ secrets.JIRA_API_TOKEN }}'
diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml
index 16311905cd..8f0bc98c0b 100644
--- a/.github/workflows/prepare-release.yml
+++ b/.github/workflows/prepare-release.yml
@@ -31,7 +31,7 @@ jobs:
         run: pnpm run prepare-release:stable
 
       - name: create Pull Request
-        uses: peter-evans/create-pull-request@v5
+        uses: peter-evans/create-pull-request@v6
         with:
           token: ${{ github.token }}
           commit-message: "chore(release): prepare stable release"
diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index be4fae7322..beec04a9db 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,24 @@
 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.2](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.1...vue3-migration-test@1.0.0-alpha.2) (2024-05-01)
+
+
+### Testing
+
+* add Sort components to Vue 3 migration test (#1454) ([7ccffb0](https://github.com/empathyco/x/commit/7ccffb084cdf6521c57977eca4d19d93f6586a2d))
+
+
+
+## [1.0.0-alpha.1](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.0...vue3-migration-test@1.0.0-alpha.1) (2024-05-01)
+
+
+### Code Refactoring
+
+* **base-event-button:** migrate base-event-button component to Composition API (#1457) ([39a7a8e](https://github.com/empathyco/x/commit/39a7a8ed4767ae78d447e6ddca530c41f9f681dc))
+
+
+
 ## [1.0.0-alpha.0](https://github.com/empathyco/x/compare/vue3-migration-test@0.1.0-alpha.0...vue3-migration-test@1.0.0-alpha.0) (2024-04-24)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 61fa12b04a..fddbafd310 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.0",
+  "version": "1.0.0-alpha.2",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
@@ -15,7 +15,8 @@
     "@vue/compat": "^3.4.22",
     "@vueuse/core": "~10.7.1",
     "vue": "^3.4.22",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/packages/_vue3-migration-test/src/App.vue b/packages/_vue3-migration-test/src/App.vue
index 11a8b7cefe..580b79e467 100644
--- a/packages/_vue3-migration-test/src/App.vue
+++ b/packages/_vue3-migration-test/src/App.vue
@@ -7,7 +7,12 @@
       </RouterLink>
     </nav>
     <main>
-      <RouterView />
+      <RouterView v-slot="{ Component }">
+        <!-- Components are mounted only once with keep-alive -->
+        <KeepAlive>
+          <component :is="Component" />
+        </KeepAlive>
+      </RouterView>
     </main>
   </div>
 </template>
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 156d0c075a..97f6f6a19c 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from './animations';
 export { default as TestBaseDropdown } from './test-base-dropdown.vue';
 export * from './scroll';
+export { default as TestBaseEventButton } from './test-base-event-button.vue';
diff --git a/packages/_vue3-migration-test/src/components/test-base-event-button.vue b/packages/_vue3-migration-test/src/components/test-base-event-button.vue
new file mode 100644
index 0000000000..a3e1cadcbd
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/test-base-event-button.vue
@@ -0,0 +1,27 @@
+<template>
+  <BaseEventButton @focusin="onFocusin" :events="events" data-id="$attrs working on Vue3!">
+    <span>Emit X event!</span>
+  </BaseEventButton>
+</template>
+
+<script setup lang="ts">
+  import BaseEventButton from '../../../x-components/src/components/base-event-button.vue';
+  import { use$x } from '../../../x-components/src/composables/use-$x';
+  import { XEvent, XEventsTypes } from '../../../x-components/src/wiring/events.types';
+
+  // eslint-disable-next-line max-len
+  // TODO `$x` name cannot be used while XPlugin defines its own `this.$x` in the mixin: https://github.com/empathyco/x/blob/main/packages/x-components/src/plugins/x-plugin.mixin.ts#L55
+  const _$x = use$x();
+
+  const events: Partial<XEventsTypes> = {
+    UserClickedASort: 'price asc',
+    UserClickedPDPAddToCart: 'A012'
+  };
+
+  Object.entries(events).forEach(([event]) =>
+    // eslint-disable-next-line no-console
+    _$x.on(event as XEvent, true).subscribe(args => console.log('BaseEventButton emission:', args))
+  );
+  // eslint-disable-next-line no-console
+  const onFocusin = (): void => console.log('$listeners working on Vue3!');
+</script>
diff --git a/packages/_vue3-migration-test/src/index.ts b/packages/_vue3-migration-test/src/index.ts
index 07635cbbc8..ea54b7e21f 100644
--- a/packages/_vue3-migration-test/src/index.ts
+++ b/packages/_vue3-migration-test/src/index.ts
@@ -1 +1,2 @@
 export * from './components';
+export * from './x-modules';
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index c8fc07e362..58fdfd9f62 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -1,4 +1,7 @@
+import { XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
+import { createStore } from 'vuex';
+import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import App from './App.vue';
 import router from './router';
 
@@ -6,12 +9,26 @@ import router from './router';
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
 if (VUE_COMPAT_MODE === 2) {
   configureCompat({
+    /**
+     * Remove $attrs and $listeners when Vue 3 and `INSTANCE_LISTENERS: false`.
+     * Both $attrs and $listeners are inherited (automatically forwarded) to the root component
+     * by default:
+     * https://vuejs.org/guide/components/attrs#nested-component-inheritance
+     * https://github.com/vuejs/core/issues/4566#issuecomment-917997056.
+     */
     INSTANCE_LISTENERS: 'suppress-warning',
     RENDER_FUNCTION: false,
-    COMPONENT_V_MODEL: false
+    COMPONENT_V_MODEL: false,
+    WATCH_ARRAY: false
   });
 }
 
+const adapter = {} as XComponentsAdapter;
+
+const store = createStore({});
+
 createApp(App as Component)
   .use(router)
+  .use(store)
+  .use(xPlugin, { adapter, store })
   .mount('#app');
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 6daad0eabd..4c25eddfa6 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -1,5 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import { TestAnimateWidth, TestBaseDropdown, TestFade, TestScroll } from './';
+import {
+  TestAnimateWidth,
+  TestBaseDropdown,
+  TestBaseEventButton,
+  TestFade,
+  TestSortDropdown,
+  TestSortList,
+  TestSortPickerList,
+  TestScroll
+} from './';
 
 const routes = [
   {
@@ -21,6 +30,26 @@ const routes = [
     path: '/base-dropdown',
     name: 'BaseDropdown',
     component: TestBaseDropdown
+  },
+  {
+    path: '/base-event-button',
+    name: 'BaseEventButton',
+    component: TestBaseEventButton
+  },
+  {
+    path: '/sort-dropdown',
+    name: 'SortDropdown',
+    component: TestSortDropdown
+  },
+  {
+    path: '/sort-list',
+    name: 'SortList',
+    component: TestSortList
+  },
+  {
+    path: '/sort-picker-list',
+    name: 'SortPickerList',
+    component: TestSortPickerList
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
new file mode 100644
index 0000000000..5a2bdeb5b8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -0,0 +1 @@
+export * from './search';
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
new file mode 100644
index 0000000000..32ee402482
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search/components/index.ts
@@ -0,0 +1,3 @@
+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';
diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-dropdown.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-dropdown.vue
new file mode 100644
index 0000000000..80f051c8b9
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-dropdown.vue
@@ -0,0 +1,17 @@
+<template>
+  <SortDropdown :items="sortValues">
+    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>
+    <template #item="{ item, isHighlighted, isSelected }">
+      <span v-if="isSelected">✅</span>
+      <span v-if="isHighlighted">🟢</span>
+      {{ item }}
+    </template>
+  </SortDropdown>
+</template>
+
+<script setup lang="ts">
+  // eslint-disable-next-line max-len
+  import SortDropdown from '../../../../../x-components/src/x-modules/search/components/sort-dropdown.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue
new file mode 100644
index 0000000000..3942e806ec
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue
@@ -0,0 +1,14 @@
+<template>
+  <SortList :items="sortValues">
+    <template #default="{ item, isSelected }">
+      <span v-if="isSelected">✅</span>
+      {{ item }}
+    </template>
+  </SortList>
+</template>
+
+<script setup lang="ts">
+  import SortList from '../../../../../x-components/src/x-modules/search/components/sort-list.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue
new file mode 100644
index 0000000000..867190896f
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue
@@ -0,0 +1,15 @@
+<template>
+  <SortPickerList :items="sortValues">
+    <template #default="{ item, isSelected }">
+      <span v-if="isSelected">✅</span>
+      {{ item }}
+    </template>
+  </SortPickerList>
+</template>
+
+<script setup lang="ts">
+  // eslint-disable-next-line max-len
+  import SortPickerList from '../../../../../x-components/src/x-modules/search/components/sort-picker-list.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/search/index.ts b/packages/_vue3-migration-test/src/x-modules/search/index.ts
new file mode 100644
index 0000000000..07635cbbc8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/_vue3-migration-test/vite.config.ts b/packages/_vue3-migration-test/vite.config.ts
index f369e93a29..bb5c4cb64d 100644
--- a/packages/_vue3-migration-test/vite.config.ts
+++ b/packages/_vue3-migration-test/vite.config.ts
@@ -28,7 +28,8 @@ export default defineConfig(({ mode }) => {
     resolve: {
       alias: {
         '@vueuse/core': resolve(__dirname, 'node_modules/@vueuse/core'),
-        vue: resolve(__dirname, 'node_modules/@vue/compat')
+        vue: resolve(__dirname, 'node_modules/@vue/compat'),
+        vuex: resolve(__dirname, 'node_modules/vuex')
       }
     },
     optimizeDeps: {
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index 22b6a5cc06..430faaaddd 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,51 @@
 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.5](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.4...@empathyco/x-components@5.0.0-alpha.5) (2024-05-01)
+
+
+### Testing
+
+* add Sort components to Vue 3 migration test (#1454) ([7ccffb0](https://github.com/empathyco/x/commit/7ccffb084cdf6521c57977eca4d19d93f6586a2d))
+
+
+
+## [5.0.0-alpha.4](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.3...@empathyco/x-components@5.0.0-alpha.4) (2024-05-01)
+
+
+### Bug Fixes
+
+* **query-preview-list:** enable inherit attrs (#1458) ([1adbfe0](https://github.com/empathyco/x/commit/1adbfe04665e289aa0c325daced40f257669fe2d))
+
+
+
+## [5.0.0-alpha.3](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.2...@empathyco/x-components@5.0.0-alpha.3) (2024-05-01)
+
+
+### Code Refactoring
+
+* **base-event-button:** migrate base-event-button component to Composition API (#1457) ([39a7a8e](https://github.com/empathyco/x/commit/39a7a8ed4767ae78d447e6ddca530c41f9f681dc))
+
+
+
+## [5.0.0-alpha.2](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.1...@empathyco/x-components@5.0.0-alpha.2) (2024-05-01)
+
+
+### Documentation
+
+* fix typo (#1455) ([44eae35](https://github.com/empathyco/x/commit/44eae359b33f9642eb9af02701fd6a3295a2deb9))
+
+
+
+## [5.0.0-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.0...@empathyco/x-components@5.0.0-alpha.1) (2024-04-29)
+
+
+### Code Refactoring
+
+* **query-preview:** migrate query preview component x provide (#1452) ([a60c62a](https://github.com/empathyco/x/commit/a60c62a35d7ba3f13e6561583a0af9f5a46c61b2))
+
+
+
 ## [5.0.0-alpha.0](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.46...@empathyco/x-components@5.0.0-alpha.0) (2024-04-24)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index a73b3e7869..feac54878b 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.0",
+  "version": "5.0.0-alpha.5",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
diff --git a/packages/x-components/src/components/__tests__/base-event-button.spec.ts b/packages/x-components/src/components/__tests__/base-event-button.spec.ts
index a4fc0b650a..35e0a22757 100644
--- a/packages/x-components/src/components/__tests__/base-event-button.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-event-button.spec.ts
@@ -1,67 +1,79 @@
-import { forEach } from '@empathyco/x-utils';
 import { mount } from '@vue/test-utils';
+import { installNewXPlugin } from '../../__tests__/utils';
+import { XPlugin } from '../../plugins';
 import { WireMetadata } from '../../wiring/wiring.types';
 import BaseEventButton from '../base-event-button.vue';
 
-describe('testing Base Event Button Component', () => {
-  const emitSpy = jest.fn();
+function render() {
+  installNewXPlugin();
 
-  const componentWrapper = mount(BaseEventButton, {
-    propsData: {
-      events: {}
-    },
-    mocks: {
-      $x: {
-        emit: emitSpy
-      }
+  const wrapper = mount(
+    {
+      template: `<BaseEventButton :events="events">
+        <span class="test-msg">button text</span>
+        <i class="test-icon"></i>
+      </BaseEventButton>`,
+      components: { BaseEventButton },
+      props: ['events']
     },
-    slots: {
-      default: [
-        { template: '<span class="test-msg">button text</span>' },
-        { template: '<i class="test-icon"></i>' }
-      ]
+    {
+      propsData: { events: {} }
     }
-  });
-  const expectedMetadata: Omit<WireMetadata, 'moduleName'> = {
-    target: componentWrapper.element
-  };
+  );
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
+  return {
+    wrapper,
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
+    expectedMetadata: {
+      location: 'none',
+      moduleName: null,
+      replaceable: true,
+      target: wrapper.element
+    } as WireMetadata
+  } as const;
+}
 
+describe('testing Base Event Button Component', () => {
   it('renders everything passed to its default slot', () => {
-    expect(componentWrapper.find('.test-msg').exists()).toBe(true);
-    expect(componentWrapper.find('.test-icon').exists()).toBe(true);
+    const { wrapper } = render();
+
+    expect(wrapper.find('.test-msg').exists()).toBeTruthy();
+    expect(wrapper.find('.test-icon').exists()).toBeTruthy();
   });
 
-  it('emits an event with a payload', () => {
-    componentWrapper.setProps({
-      events: { testEvent: 'testPayload' }
-    });
-    componentWrapper.trigger('click');
+  it('emits an event with a payload', async () => {
+    const { wrapper, emitSpy, expectedMetadata } = render();
+
+    await wrapper.setProps({ events: { testEvent: 'test-payload' } });
+    await wrapper.trigger('click');
 
-    expect(emitSpy).toHaveBeenCalledWith('testEvent', 'testPayload', expectedMetadata);
+    expect(emitSpy).toHaveBeenCalledTimes(1);
+    expect(emitSpy).toHaveBeenCalledWith('testEvent', 'test-payload', expectedMetadata);
   });
 
-  it('emits an event with no payload', () => {
-    componentWrapper.setProps({ events: { testEvent: undefined } });
-    componentWrapper.trigger('click');
+  it('emits an event with no payload', async () => {
+    const { wrapper, emitSpy, expectedMetadata } = render();
 
+    await wrapper.setProps({ events: { testEvent: undefined } });
+    await wrapper.trigger('click');
+
+    expect(emitSpy).toHaveBeenCalledTimes(1);
     expect(emitSpy).toHaveBeenCalledWith('testEvent', undefined, expectedMetadata);
   });
 
-  it('emits multiple events with multiple payloads', () => {
+  it('emits multiple events with multiple payloads', async () => {
+    const { wrapper, emitSpy, expectedMetadata } = render();
+
     const events = {
       testEvent1: 'test-payload-1',
       testEvent2: 'test-payload-2',
       testEvent3: undefined
     };
-    componentWrapper.setProps({ events });
-    componentWrapper.trigger('click');
+    await wrapper.setProps({ events });
+    await wrapper.trigger('click');
 
     expect(emitSpy).toHaveBeenCalledTimes(3);
-    forEach(events, (event, payload) =>
+    Object.entries(events).forEach(([event, payload]) =>
       expect(emitSpy).toHaveBeenCalledWith(event, payload, expectedMetadata)
     );
   });
diff --git a/packages/x-components/src/components/animations/animate-width.vue b/packages/x-components/src/components/animations/animate-width.vue
index bafc52fc04..835d43604c 100644
--- a/packages/x-components/src/components/animations/animate-width.vue
+++ b/packages/x-components/src/components/animations/animate-width.vue
@@ -15,6 +15,7 @@
    * @public
    */
   export default defineComponent({
+    name: 'AnimateWidth',
     inheritAttrs: false
   });
 </script>
diff --git a/packages/x-components/src/components/animations/fade.vue b/packages/x-components/src/components/animations/fade.vue
index 5c7439400f..21aee19e89 100644
--- a/packages/x-components/src/components/animations/fade.vue
+++ b/packages/x-components/src/components/animations/fade.vue
@@ -19,9 +19,7 @@
     name: 'Fade',
     inheritAttrs: false,
     props: {
-      /**
-       * Indicates if the transition must be applied on the initial render of the node.
-       */
+      /** Indicates if the transition must be applied on the initial render of the node. */
       appear: {
         type: Boolean,
         default: true
diff --git a/packages/x-components/src/components/animations/staggering-transition-group.vue b/packages/x-components/src/components/animations/staggering-transition-group.vue
index b4d7b03666..13b8b05859 100644
--- a/packages/x-components/src/components/animations/staggering-transition-group.vue
+++ b/packages/x-components/src/components/animations/staggering-transition-group.vue
@@ -487,11 +487,11 @@
 ### Basic example
 
 Apart from all the props and events that the classic transition group has, the staggering transition
-group also exposes a new `stagger` property, which allows to configure the delay for each one of the
-nodes when animating.
+group also exposes a new `staggering` property, which allows to configure the delay for each one of
+the nodes when animating.
 
 ```vue
-<staggering-transition-group appear :stagger="50" name="staggered-fade-slide-">
+<staggering-transition-group appear :staggering="50" name="staggered-fade-slide-">
   <!-- @slot (Required) Transition-group content -->
   <slot />
 </staggering-transition-group>
diff --git a/packages/x-components/src/components/base-event-button.vue b/packages/x-components/src/components/base-event-button.vue
index fc09926443..37c295d034 100644
--- a/packages/x-components/src/components/base-event-button.vue
+++ b/packages/x-components/src/components/base-event-button.vue
@@ -1,41 +1,53 @@
 <template>
-  <button v-on="$listeners" @click="emitEvents" data-test="event-button">
+  <button ref="rootRef" v-on="$listeners" @click="emitEvents" data-test="event-button">
     <!-- @slot (Required) Button content with a text, an icon or both -->
     <slot />
   </button>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { XEvent, XEventsTypes } from '../wiring';
+  import { defineComponent, PropType, ref } from 'vue';
+  import { use$x } from '../composables/use-$x';
+  import { XEvent, XEventsTypes } from '../wiring/events.types';
 
   /**
    * Component to be reused that renders a `<button>` with the logic of emitting events to the bus
-   * on click. The events are passed as an object to prop {@link XEventsTypes}.
+   * on click. The events are passed as an object to prop {@link XEvent}.
    * The keys are the event name and the values are the payload of each event. All events are
    * emitted with its respective payload. If any event doesn't need payload a `undefined` must be
    * passed as value.
    *
    * @public
    */
-  @Component
-  export default class BaseEventButton extends Vue {
-    /**
-     * (Required) A object where the keys are the {@link XEvent} and the values
-     * are the payload of each event.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected events!: Partial<XEventsTypes>;
+  export default defineComponent({
+    name: 'BaseEventButton',
+    props: {
+      /** An object where the keys are the {@link XEvent} and the values are the payload. */
+      events: {
+        type: Object as PropType<Partial<XEventsTypes>>,
+        required: true
+      }
+    },
+    setup(props) {
+      const $x = use$x();
 
-    protected emitEvents(): void {
-      Object.entries(this.events).forEach(([event, payload]) => {
-        this.$x.emit(event as XEvent, payload, { target: this.$el as HTMLElement });
-      });
+      const rootRef = ref<HTMLButtonElement>();
+
+      /**
+       * Emits `events` prop to the X bus with the payload given by it.
+       */
+      function emitEvents() {
+        Object.entries(props.events).forEach(([event, payload]) =>
+          $x.emit(event as XEvent, payload, { target: rootRef.value })
+        );
+      }
+
+      return {
+        emitEvents,
+        rootRef
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts
index d13d9091f7..dcb1fcef2a 100644
--- a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts
+++ b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts
@@ -97,7 +97,7 @@ describe('testing Base Column Picker List', () => {
       metadata: {
         moduleName: null, // no module registered for this base component
         target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index).element,
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
@@ -110,7 +110,7 @@ describe('testing Base Column Picker List', () => {
       metadata: {
         moduleName: null, // no module registered for this base component
         target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index).element,
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 59cebef86a..1f1258f2fa 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -250,6 +250,7 @@
                 <QueryPreviewList
                   :debounceTimeMs="250"
                   :queriesPreviewInfo="queriesPreviewInfo"
+                  data-wysiwyg="query-preview-list"
                   #default="{
                     queryPreviewInfo,
                     totalResults,
@@ -257,7 +258,7 @@
                     displayTagging,
                     queryTagging
                   }"
-                  data-test="brand-recommendation"
+                  data-test="brand-recommendations-list"
                   :persistInCache="true"
                 >
                   <DisplayEmitter
diff --git a/packages/x-components/src/x-modules/facets/components/__tests__/clear-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/__tests__/clear-filters.spec.ts
index 90aae0651e..a6f4ea811d 100644
--- a/packages/x-components/src/x-modules/facets/components/__tests__/clear-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/__tests__/clear-filters.spec.ts
@@ -167,7 +167,7 @@ describe('testing ClearFilters component', () => {
       metadata: {
         moduleName: 'facets',
         target: wrapper.element,
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
@@ -188,7 +188,7 @@ describe('testing ClearFilters component', () => {
       metadata: {
         moduleName: 'facets',
         target: wrapper.element,
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/all-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/all-filter.spec.ts
index dbd25889bc..a40438712b 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/all-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/all-filter.spec.ts
@@ -102,7 +102,7 @@ describe('testing AllFilter component', () => {
       metadata: {
         moduleName: 'facets',
         target: wrapper.element,
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/clear-history-queries.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/clear-history-queries.spec.ts
index 1166e96be8..8f05db5b31 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/clear-history-queries.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/clear-history-queries.spec.ts
@@ -57,7 +57,7 @@ describe('testing ClearHistoryQueries component', () => {
       metadata: {
         moduleName: 'historyQueries',
         target: clearHistoryQueries.element,
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/remove-history-query.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/remove-history-query.spec.ts
index a3e3665e09..b883c03ee9 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/remove-history-query.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/remove-history-query.spec.ts
@@ -30,7 +30,7 @@ describe('testing RemoveHistoryQuery component', () => {
       metadata: {
         moduleName: 'historyQueries',
         target: removeHistoryQuery.element,
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts
index 851c4ab5ce..24875178fa 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview-list.spec.ts
@@ -7,10 +7,12 @@ import {
   getResultsStub
 } from '../../../../__stubs__/index';
 import { XComponentsAdapterDummy } from '../../../../__tests__/adapter.dummy';
-import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
+import { installNewXPlugin } from '../../../../__tests__/utils';
 import { queriesPreviewXModule } from '../../x-module';
 import QueryPreviewList from '../query-preview-list.vue';
 import { QueryPreviewInfo } from '../../store/types';
+import { QueryFeature } from '../../../../types';
+import { QueryPreview } from '../index';
 
 function renderQueryPreviewList({
   template = `
@@ -18,7 +20,11 @@ function renderQueryPreviewList({
           {{ queryPreviewInfo.query }} - {{results[0].name}}
         </QueryPreviewList>`,
   queriesPreviewInfo = [{ query: 'milk' }],
-  results = { milk: getResultsStub(1) }
+  results = { milk: getResultsStub(1) },
+  debounceTimeMs = 0,
+  persistInCache = true,
+  queryFeature = 'search_box',
+  maxItemsToRender = 4
 }: RenderQueryPreviewListOptions): RenderQueryPreviewListAPI {
   const localVue = createLocalVue();
   const adapter: XComponentsAdapter = {
@@ -37,13 +43,18 @@ function renderQueryPreviewList({
     {
       template,
       components: {
-        QueryPreviewList
+        QueryPreviewList,
+        QueryPreview
       }
     },
     {
       localVue,
       propsData: {
-        queriesPreviewInfo
+        queriesPreviewInfo,
+        debounceTimeMs,
+        persistInCache,
+        queryFeature,
+        maxItemsToRender
       }
     }
   );
@@ -51,7 +62,7 @@ function renderQueryPreviewList({
     adapter,
     wrapper: wrapper.findComponent(QueryPreviewList),
     getQueryPreviewItemWrappers() {
-      return wrapper.findAll(getDataTestSelector('query-preview-item'));
+      return wrapper.findAllComponents(QueryPreview);
     },
     reRender() {
       // A timeout with no time should resolve after all reactivity + promises involved
@@ -86,6 +97,31 @@ describe('testing QueryPreviewList', () => {
     expect(queryPreviews.at(1).text()).toEqual('jeans - Sick jeans');
   });
 
+  it('should propagate global props from the list to each item', async () => {
+    const debounceTimeMsStub = 200;
+    const persistInCacheStub = false;
+    const queryFeatureStub: QueryFeature = 'history_query';
+    const maxItemsToRenderStub = 2;
+    const { getQueryPreviewItemWrappers, reRender } = renderQueryPreviewList({
+      queriesPreviewInfo: [{ query: 'shirt' }, { query: 'jeans' }],
+      results: { shirt: [createResultStub('Cool shirt')], jeans: [createResultStub('Sick jeans')] },
+      debounceTimeMs: debounceTimeMsStub,
+      persistInCache: persistInCacheStub,
+      queryFeature: queryFeatureStub,
+      maxItemsToRender: maxItemsToRenderStub
+    });
+
+    // Shirt, Jeans query previews
+    await reRender();
+    const queryPreviews = getQueryPreviewItemWrappers();
+    queryPreviews.wrappers.forEach(queryPreview => {
+      expect(queryPreview.props().debounceTimeMs).toEqual(debounceTimeMsStub);
+      expect(queryPreview.props().persistInCache).toEqual(persistInCacheStub);
+      expect(queryPreview.props().queryFeature).toEqual(queryFeatureStub);
+      expect(queryPreview.props().maxItemsToRender).toEqual(maxItemsToRenderStub);
+    });
+  });
+
   it('hides queries with no results', async () => {
     const { getQueryPreviewItemWrappers, reRender } = renderQueryPreviewList({
       queriesPreviewInfo: [{ query: 'noResults' }, { query: 'shoes' }],
@@ -135,6 +171,10 @@ interface RenderQueryPreviewListOptions {
   queriesPreviewInfo?: QueryPreviewInfo[];
   /** The results to return from the mocked search endpoint adapter. */
   results?: Record<string, Result[]>;
+  persistInCache?: boolean;
+  debounceTimeMs?: number;
+  queryFeature?: QueryFeature;
+  maxItemsToRender?: number;
 }
 
 interface RenderQueryPreviewListAPI {
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index c4393300f6..0989037e23 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -8,10 +8,13 @@
       <QueryPreview
         @load="flagAsLoaded"
         @error="flagAsFailed"
-        v-bind="$attrs"
+        :debounceTimeMs="debounceTimeMs"
+        :maxItemsToRender="maxItemsToRender"
+        :persistInCache="persistInCache"
+        :queryFeature="queryFeature"
         :queryPreviewInfo="queryPreview"
       >
-        <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="scope">
+        <template v-for="(_, slotName) in renderSlots" v-slot:[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
         </template>
       </QueryPreview>
@@ -20,14 +23,13 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import StaggeredFadeAndSlide from '../../../components/animations/staggered-fade-and-slide.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import Vue, { computed, defineComponent, PropType, ref, watch } from 'vue';
   import { RequestStatus } from '../../../store';
   import { queriesPreviewXModule } from '../x-module';
   import { QueryPreviewInfo } from '../store/types';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
+  import { AnimationProp, QueryFeature } from '../../../types';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import QueryPreview from './query-preview.vue';
 
   interface QueryPreviewStatusRecord {
@@ -41,111 +43,160 @@
    *
    * @public
    */
-  @Component({
-    inheritAttrs: false,
-    components: {
-      QueryPreview,
-      StaggeredFadeAndSlide
+  export default defineComponent({
+    name: 'QueryPreviewList',
+    xModule: queriesPreviewXModule.name,
+    components: { QueryPreview },
+    props: {
+      /**
+       * The list of queries preview to render.
+       *
+       * @public
+       */
+      queriesPreviewInfo: {
+        type: Array as PropType<QueryPreviewInfo[]>,
+        required: true
+      },
+      /**
+       * The origin property for the request on each query preview.
+       *
+       * @public
+       */
+      queryFeature: {
+        type: String as PropType<QueryFeature>
+      },
+      /**
+       * Number of query preview results to be rendered on each query preview.
+       *
+       * @public
+       */
+      maxItemsToRender: {
+        type: Number
+      },
+      /**
+       * Debounce time in milliseconds for triggering the search requests
+       * on each query preview.
+       * It will default to 0 to fit the most common use case (pre-search),
+       * and it would work properly with a 250 value inside empathize.
+       */
+      debounceTimeMs: {
+        type: Number,
+        default: 0
+      },
+      /**
+       * Controls whether all the QueryPreview should be removed from the state
+       * when the component is destroyed.
+       *
+       * @public
+       */
+      persistInCache: Boolean,
+      /**
+       * Animation component that will be used to animate the elements.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      }
     },
-    mixins: [xComponentMixin(queriesPreviewXModule)]
-  })
-  export default class QueryPreviewList extends Vue {
-    /**
-     * Animation component that will be used to animate the elements.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    public animation!: Vue | string;
+    setup(props, { slots }) {
+      useRegisterXModule(queriesPreviewXModule);
 
-    /**
-     * The list of queries preview to render.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public queriesPreviewInfo!: QueryPreviewInfo[];
+      const renderSlots = slots;
 
-    /**
-     * Contains the status of the preview requests, indexed by query.
-     */
-    public queriesStatus: QueryPreviewStatusRecord = {};
+      /**
+       * Contains the status of the preview requests, indexed by query.
+       */
+      let queriesStatus = ref<QueryPreviewStatusRecord>({});
 
-    /**
-     * The list of queries to preview.
-     *
-     * @returns The list of queries in the queriesPreviewInfo list.
-     * @internal
-     */
-    protected get queries(): string[] {
-      return this.queriesPreviewInfo.map(item => getHashFromQueryPreviewInfo(item));
-    }
+      /**
+       * The list of queries to preview.
+       *
+       * @returns The list of queries in the queriesPreviewInfo list.
+       * @internal
+       */
+      const queries = computed((): string[] =>
+        props.queriesPreviewInfo.map(item => getHashFromQueryPreviewInfo(item))
+      );
 
-    /**
-     * Gets all the queries to render, that are those that don't have an `error` status.
-     *
-     * @returns A list of queries.
-     * @internal
-     */
-    protected get renderedQueryPreviews(): QueryPreviewInfo[] {
-      return this.queriesPreviewInfo.filter(item => {
-        const queryPreviewHash = getHashFromQueryPreviewInfo(item);
-        return (
-          this.queriesStatus[queryPreviewHash] === 'success' ||
-          this.queriesStatus[queryPreviewHash] === 'loading'
-        );
+      /**
+       * Gets all the queries to render, that are those that don't have an `error` status.
+       *
+       * @returns A list of queries.
+       * @internal
+       */
+      const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {
+        return props.queriesPreviewInfo.filter(item => {
+          const queryPreviewHash = getHashFromQueryPreviewInfo(item);
+          return (
+            queriesStatus.value[queryPreviewHash] === 'success' ||
+            queriesStatus.value[queryPreviewHash] === 'loading'
+          );
+        });
       });
-    }
 
-    /**
-     * Resets the status of all queries if they change.
-     *
-     * @param newQueries - The new queries.
-     * @param oldQueries - The old queries.
-     * @internal
-     */
-    @Watch('queries', { immediate: true })
-    protected resetStatusRecord(newQueries: string[], oldQueries: string[]): void {
-      if (newQueries?.toString() !== oldQueries?.toString()) {
-        this.queriesStatus = {};
-        this.loadNext();
-      }
-    }
+      /**
+       * Tries to load the next query.
+       *
+       * @internal
+       */
+      const loadNext = (): void => {
+        const queryToLoad = queries.value.find(query => !(query in queriesStatus.value));
+        if (queryToLoad) {
+          //TODO - change this logic when we migrate to vue@3. It won't be necessary. Check this link https://v2.vuejs.org/v2/guide/migration-vue-2-7#Behavior-Differences-from-Vue-3
+          Vue.set(queriesStatus.value, queryToLoad, 'loading');
+        }
+      };
 
-    /**
-     * Sets the status of a given query to `success`.
-     *
-     * @param loadedQuery - The query to flag as loaded.
-     * @internal
-     */
-    protected flagAsLoaded(loadedQuery: string): void {
-      this.queriesStatus[loadedQuery] = 'success';
-      this.loadNext();
-    }
+      /**
+       * Resets the status of all queries if they change.
+       *
+       * @param newQueries - The new queries.
+       * @param oldQueries - The old queries.
+       * @internal
+       */
+      watch(
+        queries,
+        (newQueries: string[], oldQueries: string[] | undefined) => {
+          if (newQueries.toString() !== oldQueries?.toString()) {
+            queriesStatus.value = {};
+            loadNext();
+          }
+        },
+        { immediate: true, deep: true }
+      );
 
-    /**
-     * Sets the status of a given query to `error`.
-     *
-     * @param failedQuery - The query to flag as failed.
-     * @internal
-     */
-    protected flagAsFailed(failedQuery: string): void {
-      this.queriesStatus[failedQuery] = 'error';
-      this.loadNext();
-    }
+      /**
+       * Sets the status of a given query to `success`.
+       *
+       * @param loadedQuery - The query to flag as loaded.
+       * @internal
+       */
+      const flagAsLoaded = (loadedQuery: string): void => {
+        queriesStatus.value[loadedQuery] = 'success';
+        loadNext();
+      };
 
-    /**
-     * Tries to load the next query.
-     *
-     * @internal
-     */
-    protected loadNext(): void {
-      const queryToLoad = this.queries.find(query => !(query in this.queriesStatus));
-      if (queryToLoad) {
-        this.$set(this.queriesStatus, queryToLoad, 'loading');
-      }
+      /**
+       * Sets the status of a given query to `error`.
+       *
+       * @param failedQuery - The query to flag as failed.
+       * @internal
+       */
+      const flagAsFailed = (failedQuery: string): void => {
+        queriesStatus.value[failedQuery] = 'error';
+        loadNext();
+      };
+
+      return {
+        renderedQueryPreviews,
+        flagAsFailed,
+        flagAsLoaded,
+        renderSlots
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 191e81770e..7bdd812aee 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -35,16 +35,21 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop, Inject, Watch } from 'vue-property-decorator';
+  import {
+    computed,
+    ComputedRef,
+    defineComponent,
+    inject,
+    onBeforeUnmount,
+    PropType,
+    provide,
+    Ref,
+    watch
+  } from 'vue';
   import { SearchRequest, Result, Filter } from '@empathyco/x-types';
   import { deepEqual, Dictionary } from '@empathyco/x-utils';
-  import { State } from '../../../components/decorators/store.decorators';
   import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
-  import { XProvide } from '../../../components/decorators/injection.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { NoElement } from '../../../components/no-element';
-  import { RequestStatus } from '../../../store';
   import { QueryFeature, FeatureLocation } from '../../../types/origin';
   import { QueryPreviewInfo, QueryPreviewItem } from '../store/types';
   import { QueriesPreviewConfig } from '../config.types';
@@ -52,8 +57,11 @@
   import { createOrigin } from '../../../utils/origin';
   import { debounce } from '../../../utils/debounce';
   import { DebouncedFunction } from '../../../utils';
-  import { createRawFilter } from '../../../__stubs__/index';
+  import { createRawFilter } from '../../../__stubs__/filters-stubs.factory';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * Retrieves a preview of the results of a query and exposes them in the default slot,
@@ -62,249 +70,267 @@
    *
    * @public
    */
-  @Component({
+
+  export default defineComponent({
+    name: 'QueryPreview',
     components: {
       NoElement
     },
-    mixins: [xComponentMixin(queriesPreviewXModule)]
-  })
-  export default class QueryPreview extends Vue {
-    /**
-     * The information about the request of the query preview.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected queryPreviewInfo!: QueryPreviewInfo;
-
-    /**
-     * The origin property for the request.
-     *
-     * @public
-     */
-    @Prop()
-    protected queryFeature?: QueryFeature;
-
-    /**
-     * Number of query preview results to be rendered.
-     *
-     * @public
-     */
-    @Prop()
-    protected maxItemsToRender?: number;
-
-    /**
-     * Debounce time in milliseconds for triggering the search requests.
-     * It will default to 0 to fit the most common use case (pre-search),
-     * and it would work properly with a 250 value inside empathize.
-     */
-    @Prop({ default: 0 })
-    public debounceTimeMs!: number;
-
-    /**
-     * Controls whether the QueryPreview should be removed from the state
-     * when the component is destroyed.
-     *
-     * @public
-     */
-    @Prop({ default: false })
-    public persistInCache!: boolean;
-
-    /**
-     * The results preview of the queries preview cacheable mounted.
-     * It is a dictionary, indexed by the query preview query.
-     */
-    @State('queriesPreview', 'queriesPreview')
-    public previewResults!: Dictionary<QueryPreviewItem>;
-
-    /**
-     * As the request is handled in this component, we need
-     * the extra params that will be used in the request.
-     */
-    @State('queriesPreview', 'params')
-    public params!: Dictionary<unknown>;
-
-    /**
-     * As the request is handled in this component, we need
-     * the config that will be used in the request.
-     */
-    @State('queriesPreview', 'config')
-    public config!: QueriesPreviewConfig;
-
-    /**
-     * The results to render from the state.
-     *
-     * @remarks The results list are provided with `items` key. It can be
-     * concatenated with list items from components such as `BannersList`, `PromotedsList`,
-     * `BaseGrid` or any component that injects the list.
-     *
-     * @returns A list of results.
-     * @public
-     */
-    @XProvide(LIST_ITEMS_KEY)
-    public get results(): Result[] | undefined {
-      return this.queryPreviewResults?.results;
-    }
-
-    /**
-     * It injects the provided {@link FeatureLocation} of the selected query in the search request.
-     *
-     * @internal
-     */
-    @Inject({ default: undefined })
-    protected location?: FeatureLocation;
-
-    /**
-     * Query Preview key converted into a unique id.
-     *
-     * @returns The query hash.
-     * @internal
-     */
-    public get queryPreviewHash(): string {
-      return getHashFromQueryPreviewInfo(this.queryPreviewInfo);
-    }
-
-    /**
-     * The computed request object to be used to retrieve the query preview results.
-     *
-     * @returns The search request object.
-     * @internal
-     */
-    protected get queryPreviewRequest(): SearchRequest {
-      const origin = createOrigin({
-        feature: this.queryFeature,
-        location: this.location
+    xModule: queriesPreviewXModule.name,
+    props: {
+      /**
+       * The information about the request of the query preview.
+       *
+       * @public
+       */
+      queryPreviewInfo: {
+        type: Object as PropType<QueryPreviewInfo>,
+        required: true
+      },
+      /**
+       * The origin property for the request.
+       *
+       * @public
+       */
+      queryFeature: {
+        type: String as PropType<QueryFeature>
+      },
+      /**
+       * Number of query preview results to be rendered.
+       *
+       * @public
+       */
+      maxItemsToRender: {
+        type: Number
+      },
+      /**
+       * Debounce time in milliseconds for triggering the search requests.
+       * It will default to 0 to fit the most common use case (pre-search),
+       * and it would work properly with a 250 value inside empathize.
+       */
+      debounceTimeMs: {
+        type: Number,
+        default: 0
+      },
+      /**
+       * Controls whether the QueryPreview should be removed from the state
+       * when the component is destroyed.
+       *
+       * @public
+       */
+      persistInCache: {
+        type: Boolean,
+        default: false
+      }
+    },
+    emits: ['load', 'error'],
+    setup(props, { emit }) {
+      useRegisterXModule(queriesPreviewXModule);
+
+      const xBus = useXBus();
+
+      const queriesPreviewState = useState('queriesPreview', [
+        'queriesPreview',
+        'params',
+        'config'
+      ]);
+
+      /**
+       * The results preview of the queries preview cacheable mounted.
+       * It is a dictionary, indexed by the query preview query.
+       */
+      const previewResults: ComputedRef<Dictionary<QueryPreviewItem>> =
+        queriesPreviewState.queriesPreview;
+
+      /**
+       * As the request is handled in this component, we need
+       * the extra params that will be used in the request.
+       */
+      const params: ComputedRef<Dictionary<unknown>> = queriesPreviewState.params;
+
+      /**
+       * As the request is handled in this component, we need
+       * the config that will be used in the request.
+       */
+      const config: ComputedRef<QueriesPreviewConfig> = queriesPreviewState.config;
+
+      /**
+       * Query Preview key converted into a unique id.
+       *
+       * @returns The query hash.
+       * @internal
+       */
+      const queryPreviewHash = computed((): string => {
+        return getHashFromQueryPreviewInfo(props.queryPreviewInfo);
       });
-      const filters = this.queryPreviewInfo.filters?.reduce((filtersList, filterId) => {
-        const facetId = filterId.split(':')[0];
-        const rawFilter = createRawFilter(filterId);
-        filtersList[facetId] = filtersList[facetId]
-          ? filtersList[facetId].concat(rawFilter)
-          : [rawFilter];
 
-        return filtersList;
-      }, {} as Record<string, Filter[]>);
-
-      return {
-        query: this.queryPreviewInfo.query,
-        rows: this.config.maxItemsToRequest,
-        extraParams: {
-          ...this.params,
-          ...this.queryPreviewInfo.extraParams
-        },
-        filters: filters,
-        ...(origin && { origin })
-      };
-    }
+      /**
+       * Gets from the state the results preview of the query preview.
+       *
+       * @returns The results preview of the actual query preview.
+       */
+      const queryPreviewResults = computed((): Partial<QueryPreviewItem> | undefined => {
+        const resultsPreview = previewResults.value[queryPreviewHash.value];
+        return resultsPreview?.results
+          ? {
+              ...resultsPreview,
+              results: resultsPreview.results.slice(0, props.maxItemsToRender)
+            }
+          : undefined;
+      });
 
-    /**
-     * Gets from the state the results preview of the query preview.
-     *
-     * @returns The results preview of the actual query preview.
-     */
-    public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {
-      const previewResults = this.previewResults[this.queryPreviewHash];
-      return previewResults?.results
-        ? {
-            ...previewResults,
-            results: previewResults.results.slice(0, this.maxItemsToRender)
-          }
-        : undefined;
-    }
+      /**
+       * The results to render from the state.
+       *
+       * @remarks The results list are provided with `items` key. It can be
+       * concatenated with list items from components such as `BannersList`, `PromotedsList`,
+       * `BaseGrid` or any component that injects the list.
+       *
+       * @returns A list of results.
+       * @public
+       */
+      const results = computed((): Result[] | undefined => {
+        return queryPreviewResults.value?.results;
+      });
+      provide<Ref<Result[] | undefined>>(LIST_ITEMS_KEY as string, results);
+
+      /**
+       * It injects the provided {@link FeatureLocation} of the selected query in the search request.
+       *
+       * @internal
+       */
+      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none');
+      const location =
+        typeof injectedLocation === 'object' && 'value' in injectedLocation
+          ? injectedLocation.value
+          : injectedLocation;
+
+      /**
+       * The computed request object to be used to retrieve the query preview results.
+       *
+       * @returns The search request object.
+       * @internal
+       */
+      const queryPreviewRequest = computed((): SearchRequest => {
+        const origin = createOrigin({
+          feature: props.queryFeature,
+          location: location
+        });
+        const filters = props.queryPreviewInfo.filters?.reduce((filtersList, filterId) => {
+          const facetId = filterId.split(':')[0];
+          const rawFilter = createRawFilter(filterId);
+          filtersList[facetId] = filtersList[facetId]
+            ? filtersList[facetId].concat(rawFilter)
+            : [rawFilter];
+
+          return filtersList;
+        }, {} as Record<string, Filter[]>);
+
+        return {
+          query: props.queryPreviewInfo.query,
+          rows: config.value.maxItemsToRequest,
+          extraParams: {
+            ...params.value,
+            ...props.queryPreviewInfo.extraParams
+          },
+          filters: filters,
+          ...(origin && { origin })
+        };
+      });
 
-    /**
-     * The debounce method to trigger the request after the debounceTimeMs defined
-     * for cacheable queries.
-     *
-     * @returns The search request object.
-     * @internal
-     */
-    protected get emitQueryPreviewRequestUpdated(): DebouncedFunction<[SearchRequest]> {
-      return debounce(request => {
-        this.$x.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false });
-      }, this.debounceTimeMs);
-    }
+      /**
+       * The debounce method to trigger the request after the debounceTimeMs defined
+       * for cacheable queries.
+       *
+       * @returns The search request object.
+       * @internal
+       */
+      const emitQueryPreviewRequestUpdated = computed((): DebouncedFunction<[SearchRequest]> => {
+        return debounce(request => {
+          xBus.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false });
+        }, props.debounceTimeMs);
+      });
 
-    /**
-     * Initialises watcher to emit debounced requests, and first value for the requests.
-     *
-     * @internal
-     */
-    protected created(): void {
-      this.$watch(
-        () => this.queryPreviewRequest,
-        (newRequest, oldRequest) => {
-          if (!deepEqual(newRequest, oldRequest)) {
-            this.emitQueryPreviewRequestUpdated(newRequest);
-          }
+      /**
+       * Initialises watcher to emit debounced requests, and first value for the requests.
+       *
+       * @internal
+       */
+      watch(queryPreviewRequest, (newRequest, oldRequest) => {
+        if (!deepEqual(newRequest, oldRequest)) {
+          emitQueryPreviewRequestUpdated.value(newRequest);
         }
-      );
+      });
 
-      const cachedQueryPreview = this.previewResults[this.queryPreviewHash];
+      const cachedQueryPreview = previewResults.value[queryPreviewHash.value];
 
       // If the query has been saved it will emit load instead of the emitting the updated request.
       if (cachedQueryPreview?.status === 'success') {
-        this.$emit('load', this.queryPreviewHash);
-        this.$x.emit('QueryPreviewMounted', this.queryPreviewHash, {
+        emit('load', queryPreviewHash.value);
+        xBus.emit('QueryPreviewMounted', queryPreviewHash.value, {
           priority: 0,
           replaceable: false
         });
       } else {
-        this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
+        emitQueryPreviewRequestUpdated.value(queryPreviewRequest.value);
       }
-    }
 
-    /**
-     * Cancels the (remaining) requests when the component is destroyed
-     * via the `debounce.cancel()` method.
-     * If the prop 'persistInCache' is set to false, it also removes the QueryPreview
-     * from the state when the component is destroyed.
-     *
-     * @internal
-     */
-    protected beforeDestroy(): void {
-      this.emitQueryPreviewRequestUpdated.cancel();
-      this.$x.emit(
-        'QueryPreviewUnmounted',
-        { queryPreviewHash: this.queryPreviewHash, cache: this.persistInCache },
-        {
-          priority: 0,
-          replaceable: false
+      /**
+       * Cancels the (remaining) requests when the component is destroyed
+       * via the `debounce.cancel()` method.
+       * If the prop 'persistInCache' is set to false, it also removes the QueryPreview
+       * from the state when the component is destroyed.
+       *
+       * @internal
+       */
+      onBeforeUnmount(() => {
+        emitQueryPreviewRequestUpdated.value.cancel();
+        xBus.emit(
+          'QueryPreviewUnmounted',
+          { queryPreviewHash: queryPreviewHash.value, cache: props.persistInCache },
+          {
+            priority: 0,
+            replaceable: false
+          }
+        );
+      });
+
+      /**
+       * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs
+       * prop changes or there is a request in progress that cancels it).
+       *
+       * @param _new - The new debounced function.
+       * @param old - The previous debounced function.
+       * @internal
+       */
+      watch(
+        emitQueryPreviewRequestUpdated,
+        (_new: DebouncedFunction<[SearchRequest]>, old: DebouncedFunction<[SearchRequest]>) => {
+          old.cancel();
         }
       );
-    }
 
-    /**
-     * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs
-     * prop changes or there is a request in progress that cancels it).
-     *
-     * @param _new - The new debounced function.
-     * @param old - The previous debounced function.
-     * @internal
-     */
-    @Watch('emitQueryPreviewRequestUpdated')
-    protected cancelEmitPreviewRequestUpdated(
-      _new: DebouncedFunction<[SearchRequest]>,
-      old: DebouncedFunction<[SearchRequest]>
-    ): void {
-      old.cancel();
-    }
+      const queryPreviewResultsStatus = computed(() => queryPreviewResults.value?.status);
+
+      /**
+       * Emits an event when the query results are loaded or fail to load.
+       *
+       * @param status - The status of the query preview request.
+       * @internal
+       */
+      watch(queryPreviewResultsStatus, () => {
+        if (queryPreviewResultsStatus.value === 'success') {
+          emit(results.value?.length ? 'load' : 'error', queryPreviewHash.value);
+        } else if (queryPreviewResultsStatus.value === 'error') {
+          emit('error', queryPreviewHash.value);
+        }
+      });
 
-    /**
-     * Emits an event when the query results are loaded or fail to load.
-     *
-     * @param status - The status of the query preview request.
-     * @internal
-     */
-    @Watch('queryPreviewResults.status')
-    emitLoad(status: RequestStatus | undefined): void {
-      if (status === 'success') {
-        this.$emit(this.results?.length ? 'load' : 'error', this.queryPreviewHash);
-      } else if (status === 'error') {
-        this.$emit('error', this.queryPreviewHash);
-      }
+      return {
+        queryPreviewResults
+      };
     }
-  }
+  });
 </script>
 <docs lang="mdx">
 ## Events
diff --git a/packages/x-components/src/x-modules/search-box/components/__tests__/clear-search-input.spec.ts b/packages/x-components/src/x-modules/search-box/components/__tests__/clear-search-input.spec.ts
index b50aca6a8a..12ad1708e9 100644
--- a/packages/x-components/src/x-modules/search-box/components/__tests__/clear-search-input.spec.ts
+++ b/packages/x-components/src/x-modules/search-box/components/__tests__/clear-search-input.spec.ts
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../../../__tests__/utils';
+import { XPlugin } from '../../../../plugins';
 import ClearSearchInput from '../clear-search-input.vue';
 
 describe('testing ClearSearchInput component', () => {
@@ -7,8 +8,13 @@ describe('testing ClearSearchInput component', () => {
 
   it('emits UserPressedClearSearchBoxButton event when clicked', () => {
     const clearSearchInput = mount(ClearSearchInput, { localVue });
-    const target = { target: clearSearchInput.element };
-    const emitSpy = jest.spyOn(clearSearchInput.vm.$children[0].$x, 'emit');
+    const target = {
+      location: 'none',
+      moduleName: 'searchBox',
+      replaceable: true,
+      target: clearSearchInput.element
+    };
+    const emitSpy = jest.spyOn(XPlugin.bus, 'emit');
 
     clearSearchInput.trigger('click');
 
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts
index c3705b5a96..73a3625256 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts
@@ -85,7 +85,7 @@ describe('testing SortList component', () => {
       metadata: {
         moduleName: 'search',
         target: getButton(2),
-        location: undefined, // TODO - Emission by BaseEventButton in the old way. `none` when use$x
+        location: 'none',
         replaceable: true
       }
     });
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
index 36e3abbbf8..0bb284179e 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
@@ -92,7 +92,7 @@ describe('testing SortPickerList component', () => {
       metadata: {
         moduleName: 'search',
         target: getButton(2),
-        location: undefined, // TODO - Emission by BaseEventButton in the old way. `none` when use$x
+        location: 'none',
         replaceable: true
       }
     });
diff --git a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
index 20b4ed2962..25abd48145 100644
--- a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
@@ -12,7 +12,7 @@
       :class="[cssClasses, buttonClass]"
       data-test="sort-picker-button"
       :events="event"
-      :aria-pressed="item === selectedSort"
+      :aria-pressed="item === selectedSort || null"
       role="listitem"
     >
       <slot v-bind="{ item, isSelected: item === selectedSort }">
diff --git a/packages/x-components/tests/e2e/common/common-steps.spec.ts b/packages/x-components/tests/e2e/common/common-steps.spec.ts
index 2db2d2c1a2..52a26aace0 100644
--- a/packages/x-components/tests/e2e/common/common-steps.spec.ts
+++ b/packages/x-components/tests/e2e/common/common-steps.spec.ts
@@ -51,7 +51,7 @@ When('close modal button is clicked', () => {
 
 // Brand Recommendation
 Given('brand recommendations are visible', () => {
-  cy.getByDataTest('brand-recommendation').should('be.visible');
+  cy.getByDataTest('brand-recommendations-list').should('be.visible');
 });
 
 // Filters
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 972a693684..05d06088c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,9 @@ importers:
       vue-router:
         specifier: ^4.3.0
         version: 4.3.0(vue@3.4.22)
+      vuex:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.4.22)
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
@@ -21168,6 +21171,18 @@ packages:
       vue: 2.7.14
     dev: true
 
+  /vuex@4.1.0(vue@3.4.22):
+    resolution:
+      {
+        integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
+      }
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.1
+      vue: 3.4.22(typescript@4.9.4)
+    dev: false
+
   /w3c-hr-time@1.0.2:
     resolution:
       {