diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 953dbef7ba..68e242cf04 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.35](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.34...vue3-migration-test@1.0.0-alpha.35) (2024-06-24)
+
+
+### Features
+
+* replace DisableAnimationMixin by useDisableAnimation composable (#1469) ([f498d3f](https://github.com/empathyco/x/commit/f498d3fba5d294391dcfca47f9724558e98f50f0))
+
+
+
+## [1.0.0-alpha.34](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.33...vue3-migration-test@1.0.0-alpha.34) (2024-06-24)
+
+
+### Features
+
+* **extra-params:** migrate extra params and snippet config extra params (#1531) ([d869f18](https://github.com/empathyco/x/commit/d869f1886c11f74af8a6350033d7567385ad629d))
+
+
+
+## [1.0.0-alpha.33](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.32...vue3-migration-test@1.0.0-alpha.33) (2024-06-19)
+
+
+### Features
+
+* migrate popular-searches x-module (#1524) ([f79456d](https://github.com/empathyco/x/commit/f79456d4589b3f9dee5fd86fad9625b853dde267))
+
+
+
 ## [1.0.0-alpha.32](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.31...vue3-migration-test@1.0.0-alpha.32) (2024-06-18)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 681f02e6dd..042051a216 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.32",
+  "version": "1.0.0-alpha.35",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
index 4d2c00cf2b..f1ee0800dd 100644
--- a/packages/_vue3-migration-test/src/components/animations/index.ts
+++ b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -3,3 +3,4 @@ export { default as TestCollapseHeight } from './test-collapse-height.vue';
 export { default as TestCollapseWidth } from './test-collapse-width.vue';
 export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
+export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
new file mode 100644
index 0000000000..8553f4e244
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
@@ -0,0 +1,11 @@
+<template>
+  <FadeAndSlide tag="ul">
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+  </FadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import FadeAndSlide from '../../../../x-components/src/components/animations/fade-and-slide.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue b/packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue
new file mode 100644
index 0000000000..a7638946e6
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue
@@ -0,0 +1,13 @@
+<template>
+  <SnippetConfigExtraParams :values="{ catalog: 'empathy' }" />
+  {{ params }}
+</template>
+<script setup lang="ts">
+  import { provide } from 'vue';
+  import SnippetConfigExtraParams from '../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+  const snippetConfig = window.InterfaceX?.getSnippetConfig();
+  provide('snippetConfig', snippetConfig);
+  const { params } = useState('extraParams', ['params']);
+  window.InterfaceX?.setSnippetConfig({ store: 'demo', lang: 'es', warehouse: 1234 });
+</script>
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 45c4690d74..66a0cf6ff6 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -14,3 +14,4 @@ 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';
+export { default as TestExtraParams } from './extra-params/test-extra-params.vue';
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 3844a932f4..b6e5f195bf 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -1,21 +1,23 @@
 import { QuerySuggestionsRequest, 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 { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import {
+
   createRedirectionStub,
   getBannersStub,
   getNextQueriesStub,
   getPromotedsStub,
   getResultsStub
 } from '../../x-components/src/__stubs__/index';
+import { XInstaller } from '../../x-components/src/x-installer/x-installer/x-installer';
 import App from './App.vue';
 import router from './router';
 import {
   facetsXModule,
   nextQueriesXModule,
+  popularSearchesXModule,
   queriesPreviewXModule,
   recommendationsXModule,
   scrollXModule,
@@ -39,8 +41,7 @@ if (VUE_COMPAT_MODE === 2) {
     INSTANCE_LISTENERS: 'suppress-warning',
     INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
     RENDER_FUNCTION: false,
-    COMPONENT_V_MODEL: false,
-    WATCH_ARRAY: false
+    COMPONENT_V_MODEL: false
   });
 }
 
@@ -78,7 +79,11 @@ const adapter = {
         banners: getBannersStub(),
         redirections: [createRedirectionStub('redirection')]
       });
-    })
+    }),
+  identifierResults: () =>
+    new Promise(resolve =>
+      resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
+    )
 } as unknown as XComponentsAdapter;
 
 const store = createStore({});
@@ -86,18 +91,24 @@ const store = createStore({});
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, {
-    adapter,
-    store,
-    __PRIVATE__xModules: {
-      facets: facetsXModule,
-      nextQueries: nextQueriesXModule,
-      scroll: scrollXModule,
-      search: searchXModule,
-      queriesPreview: queriesPreviewXModule,
-      semanticQueries: semanticQueriesXModule,
-      recommendations: recommendationsXModule,
-      identifierResults: identifierResultsXModule
-    }
-  })
   .mount('#app');
+
+window.initX = {
+  instance: 'empathy',
+  lang: 'en'
+};
+new XInstaller({
+  adapter,
+  store,
+  __PRIVATE__xModules: {
+    facets: facetsXModule,
+    nextQueries: nextQueriesXModule,
+    scroll: scrollXModule,
+    search: searchXModule,
+    queriesPreview: queriesPreviewXModule,
+    semanticQueries: semanticQueriesXModule,
+    recommendations: recommendationsXModule,
+    identifierResults: identifierResultsXModule,
+    popularSearches: popularSearchesXModule
+  }
+}).init();
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 9ec993f01c..b7a8230b51 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -11,6 +11,7 @@ import {
   TestElementsList,
   TestFacets,
   TestFade,
+  TestFadeAndSlide,
   TestScroll,
   TestSortDropdown,
   TestSortList,
@@ -37,9 +38,11 @@ import {
   TestQuerySuggestions,
   TestSemanticQueries,
   TestRecommendations,
+  TestPopularSearches,
   TestNextQueries,
   TestIdentifierResults,
-  TestRedirection
+  TestRedirection,
+  TestExtraParams
 } from './';
 
 const routes = [
@@ -73,6 +76,11 @@ const routes = [
     name: 'BaseModal',
     component: TestBaseModal
   },
+  {
+    path: '/fade-and-slide',
+    name: 'FadeAndSlide',
+    component: TestFadeAndSlide
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',
@@ -228,6 +236,11 @@ const routes = [
     name: 'Recommendations',
     component: TestRecommendations
   },
+  {
+    path: '/popular-searches',
+    name: 'PopularSearches',
+    component: TestPopularSearches
+  },
   {
     path: '/next-queries',
     name: 'NextQueries',
@@ -242,6 +255,11 @@ const routes = [
     path: '/redirection',
     name: 'Redirection',
     component: TestRedirection
+  },
+  {
+    path: '/snippet-config-extraparams',
+    name: 'SnippetConfigExtraparams',
+    component: TestExtraParams
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts b/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
index 70ba15093a..d801729f7f 100644
--- a/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
@@ -1,6 +1,5 @@
 import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
 import { IdentifierResultsXModule } from '../../../../x-components/src/x-modules/identifier-results/x-module';
-import { createResultStub } from '../../../../x-components/src/__stubs__/results-stubs.factory';
 
 export const identifierResultsXModule: PrivateXModuleOptions<IdentifierResultsXModule> = {
   storeModule: {
@@ -11,7 +10,7 @@ export const identifierResultsXModule: PrivateXModuleOptions<IdentifierResultsXM
         identifierDetectionRegexp: '^[0-9]{2,}$',
         separatorChars: '-/ '
       },
-      identifierResults: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)),
+      identifierResults: [],
       origin: null,
       query: 'test',
       params: {},
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index a78483264e..c935daf10c 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -10,4 +10,5 @@ export * from './history-queries';
 export * from './query-suggestions';
 export * from './semantic-queries';
 export * from './recommendations';
+export * from './popular-searches';
 export * from './identifier-results';
diff --git a/packages/_vue3-migration-test/src/x-modules/popular-searches/index.ts b/packages/_vue3-migration-test/src/x-modules/popular-searches/index.ts
new file mode 100644
index 0000000000..5b975a41d8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/popular-searches/index.ts
@@ -0,0 +1,2 @@
+export * from './x-module';
+export { default as TestPopularSearches } from './test-popular-searches.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/popular-searches/test-popular-searches.vue b/packages/_vue3-migration-test/src/x-modules/popular-searches/test-popular-searches.vue
new file mode 100644
index 0000000000..c00389b39c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/popular-searches/test-popular-searches.vue
@@ -0,0 +1,23 @@
+<template>
+  <SearchInput />
+  <ClearSearchInput />
+  <div v-if="!query">
+    <h1>Popular searches</h1>
+    <PopularSearches />
+  </div>
+</template>
+
+<script setup>
+  import PopularSearches from '../../../../x-components/src/x-modules/popular-searches/components/popular-searches.vue';
+  import SearchInput from '../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import ClearSearchInput from '../../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+
+  const { query } = useState('search', ['query']);
+</script>
+
+<style scoped>
+  .x-popular-searches {
+    width: fit-content;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/x-modules/popular-searches/x-module.ts b/packages/_vue3-migration-test/src/x-modules/popular-searches/x-module.ts
new file mode 100644
index 0000000000..0aeaee7431
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/popular-searches/x-module.ts
@@ -0,0 +1,16 @@
+import { PopularSearchesXModule } from '../../../../x-components/src/x-modules/popular-searches/x-module';
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
+import { createPopularSearch } from '../../../../x-components/src/__stubs__/popular-searches-stubs.factory';
+
+export const popularSearchesXModule: PrivateXModuleOptions<PopularSearchesXModule> = {
+  storeModule: {
+    state: {
+      popularSearches: ['patata', 'salchicón', 'pan', 'queso', 'leche', 'galletas'].map(query =>
+        createPopularSearch(query)
+      ),
+      config: {
+        hideSessionQueries: false
+      }
+    }
+  }
+};
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index d0e50dc52e..659ed5a190 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.54](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.53...@empathyco/x-components@5.0.0-alpha.54) (2024-06-24)
+
+
+### Features
+
+* replace DisableAnimationMixin by useDisableAnimation composable (#1469) ([f498d3f](https://github.com/empathyco/x/commit/f498d3fba5d294391dcfca47f9724558e98f50f0))
+
+
+
+## [5.0.0-alpha.53](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.52...@empathyco/x-components@5.0.0-alpha.53) (2024-06-24)
+
+
+### Features
+
+* **extra-params:** migrate extra params and snippet config extra params (#1531) ([d869f18](https://github.com/empathyco/x/commit/d869f1886c11f74af8a6350033d7567385ad629d))
+
+
+
+## [5.0.0-alpha.52](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.51...@empathyco/x-components@5.0.0-alpha.52) (2024-06-20)
+
+
+### Features
+
+* migrate `QueryPreviewButton` component to composition API (#1525) ([3eff0c7](https://github.com/empathyco/x/commit/3eff0c7c9479abbebbda59e8cc538af6f55375e1))
+
+
+
+## [5.0.0-alpha.51](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.50...@empathyco/x-components@5.0.0-alpha.51) (2024-06-19)
+
+
+### Features
+
+* migrate popular-searches x-module (#1524) ([f79456d](https://github.com/empathyco/x/commit/f79456d4589b3f9dee5fd86fad9625b853dde267))
+
+
+
+## [5.0.0-alpha.50](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.49...@empathyco/x-components@5.0.0-alpha.50) (2024-06-19)
+
+
+### Features
+
+* migrate `facets provider` component to use Composition API (#1523) ([eff7b8d](https://github.com/empathyco/x/commit/eff7b8d92c54aece07061c2d8ce58507a56e7d01))
+
+
+
 ## [5.0.0-alpha.49](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.48...@empathyco/x-components@5.0.0-alpha.49) (2024-06-18)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index b07bdbd3c7..96f4814caf 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.49",
+  "version": "5.0.0-alpha.54",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
diff --git a/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
similarity index 60%
rename from packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts
rename to packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
index c3bc5bf904..91a642a215 100644
--- a/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
@@ -1,36 +1,33 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import { Component, Prop, Provide } from 'vue-property-decorator';
-import Vue, { ComponentOptions, CreateElement, VNode } from 'vue';
-import DisableAnimationMixin from '../disable-animation.mixin';
+import { mount } from '@vue/test-utils';
+import { defineComponent, provide, ref } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
+import { useDisableAnimation } from '../use-disable-animation';
 
-@Component
-class Provider extends Vue {
-  @Prop()
-  @Provide(DISABLE_ANIMATIONS_KEY as string)
-  public disableAnimation!: boolean;
-
-  render(h: CreateElement): VNode {
+const Provider = defineComponent({
+  props: {
+    disableAnimation: Boolean
+  },
+  setup(props) {
+    provide(DISABLE_ANIMATIONS_KEY as string, ref(props.disableAnimation));
+  },
+  render(h) {
     return this.$slots.default?.[0] ?? h();
   }
-}
+});
 
 /**
  * Animation component.
  */
-const Animation: ComponentOptions<Vue> = {
-  mixins: [DisableAnimationMixin],
+const Animation = defineComponent({
+  setup() {
+    return useDisableAnimation('x-animation');
+  },
   template: `
     <transition-group :name="name">
      <p>Animation</p>
     </transition-group>
-  `,
-  data() {
-    return {
-      animationName: 'x-animation'
-    };
-  }
-};
+  `
+});
 
 /**
  * Function that returns an Animation wrapper.
@@ -38,9 +35,7 @@ const Animation: ComponentOptions<Vue> = {
  * @param disableAnimation - Flag to disable the animation.
  * @returns Animation wrapper.
  */
-function renderDisableAnimation({
-  disableAnimation = true
-}: DisableAnimationOptions = {}): DisableAnimationAPI {
+function renderDisableAnimation({ disableAnimation = true }: DisableAnimationOptions = {}) {
   const wrapper = mount({
     template: `
         <Provider :disableAnimation="disableAnimation">
@@ -78,8 +73,3 @@ interface DisableAnimationOptions {
   /** Flag to disable the animation. */
   disableAnimation?: boolean;
 }
-
-interface DisableAnimationAPI {
-  /** The wrapper of the mounted component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/animations/collapse-height.vue b/packages/x-components/src/components/animations/collapse-height.vue
index 9ded2cfd63..7c512b4871 100644
--- a/packages/x-components/src/components/animations/collapse-height.vue
+++ b/packages/x-components/src/components/animations/collapse-height.vue
@@ -1,11 +1,12 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition
+    v-bind="$attrs"
     v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
     name="x-collapse-height-"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) to add content to the transition -->
diff --git a/packages/x-components/src/components/animations/collapse-width.vue b/packages/x-components/src/components/animations/collapse-width.vue
index 0d9a408d26..ca59254b75 100644
--- a/packages/x-components/src/components/animations/collapse-width.vue
+++ b/packages/x-components/src/components/animations/collapse-width.vue
@@ -1,11 +1,12 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition
+    v-bind="$attrs"
     v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
     name="x-collapse-width-"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) to add content to the transition -->
diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
index 1bece28416..f61f14c711 100644
--- a/packages/x-components/src/components/animations/cross-fade.vue
+++ b/packages/x-components/src/components/animations/cross-fade.vue
@@ -1,5 +1,6 @@
 <template>
-  <transition v-on="$listeners" name="x-cross-fade-" v-bind="$attrs" :appear="appear">
+  <!-- eslint-disable-next-line vue/attributes-order -->
+  <transition v-bind="$attrs" v-on="$listeners" name="x-cross-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
diff --git a/packages/x-components/src/components/animations/disable-animation.mixin.ts b/packages/x-components/src/components/animations/disable-animation.mixin.ts
deleted file mode 100644
index 9581fa47cf..0000000000
--- a/packages/x-components/src/components/animations/disable-animation.mixin.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import Vue from 'vue';
-import { Component, Inject } from 'vue-property-decorator';
-import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
-
-/**
- * Mixin to ease disabling animations.
- *
- * @public
- */
-@Component
-export default class DisableAnimationMixin extends Vue {
-  /**
-   * The name of the animation.
-   *
-   * @public
-   */
-  protected animationName!: string;
-
-  /**
-   * Flag to disable the animation.
-   *
-   * @public
-   */
-  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })
-  public disableAnimation!: boolean;
-
-  /**
-   * The animation's name based on the {@link DisableAnimationMixin.disableAnimation} flag.
-   *
-   * @returns The animation name.
-   * @internal
-   */
-  protected get name(): string {
-    return this.disableAnimation ? '__no-animation__' : this.animationName;
-  }
-}
diff --git a/packages/x-components/src/components/animations/fade-and-slide.vue b/packages/x-components/src/components/animations/fade-and-slide.vue
index 727d14dd87..9dbdb13c21 100644
--- a/packages/x-components/src/components/animations/fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -1,10 +1,11 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition-group
+    v-bind="$attrs"
     v-on="$listeners"
     class="x-fade-and-slide"
     :name="name"
     :tag="tag"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) Transition-group content -->
@@ -13,9 +14,8 @@
 </template>
 
 <script lang="ts">
-  import { mixins } from 'vue-class-component';
-  import { Prop, Component } from 'vue-property-decorator';
-  import DisableAnimationMixin from './disable-animation.mixin';
+  import { defineComponent } from 'vue';
+  import { useDisableAnimation } from './use-disable-animation';
 
   /**
    * Renders a transition group wrapping the elements passed in the default slot and animating
@@ -23,34 +23,33 @@
    *
    * @public
    */
-  @Component({
-    inheritAttrs: false
-  })
-  export default class FadeAndSlide extends mixins(DisableAnimationMixin) {
-    /**
-     * The name of the animation.
-     *
-     * @public
-     */
-    protected animationName = 'x-fade-and-slide-';
+  export default defineComponent({
+    name: 'FadeAndSlide',
+    inheritAttrs: false,
+    props: {
+      /**
+       * HTML Element that the transition-group children will be wrapped in.
+       */
+      tag: String,
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      /**
+       * The name of the animation.
+       */
+      const animationName = 'x-fade-and-slide-';
 
-    /**
-     * HTML Element that the transition-group children will be wrapped in.
-     *
-     * @public
-     */
-    @Prop()
-    protected tag!: string;
+      const { name } = useDisableAnimation(animationName);
 
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
-  }
+      return { name };
+    }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/components/animations/index.ts b/packages/x-components/src/components/animations/index.ts
index 7f6d8c69d6..26240a7f04 100644
--- a/packages/x-components/src/components/animations/index.ts
+++ b/packages/x-components/src/components/animations/index.ts
@@ -6,9 +6,9 @@ export { default as Fade } from './fade.vue';
 export { default as FadeAndSlide } from './fade-and-slide.vue';
 export { default as StaggeredFadeAndSlide } from './staggered-fade-and-slide.vue';
 export { default as StaggeringTransitionGroup } from './staggering-transition-group.vue';
-export { default as DisableAnimationMixin } from './disable-animation.mixin';
 export { createDirectionalAnimationFactory } from './create-directional-animation-factory';
 export { animateClipPath } from './animate-clip-path/animate-clip-path.factory';
 export { animateScale } from './animate-scale/animate-scale.factory';
 export { animateTranslate } from './animate-translate/animate-translate.factory';
 export * from './use-collapse-animation';
+export * from './use-disable-animation';
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 17c820d927..033f8ec17e 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -1,48 +1,52 @@
 <template>
-  <staggering-transition-group
+  <!-- eslint-disable vue/attributes-order -->
+  <StaggeringTransitionGroup
+    v-bind="$attrs"
     v-on="$listeners"
     class="x-staggered-fade-and-slide"
     :name="name"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) Transition-group content -->
     <slot />
-  </staggering-transition-group>
+  </StaggeringTransitionGroup>
 </template>
 
 <script lang="ts">
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import StaggeringTransitionGroup from '../animations/staggering-transition-group.vue';
-  import DisableAnimationMixin from './disable-animation.mixin';
+  import { defineComponent } from 'vue';
+  import StaggeringTransitionGroup from './staggering-transition-group.vue';
+  import { useDisableAnimation } from './use-disable-animation';
 
   /**
    * Renders a transition group wrapping the elements passed in the default slot and animating
-   * them with an staggered fade and slide animation.
+   * them with a staggered fade and slide animation.
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'StaggeredFadeAndSlide',
     components: { StaggeringTransitionGroup },
-    inheritAttrs: false
-  })
-  export default class StaggeredFadeAndSlide extends mixins(DisableAnimationMixin) {
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
-    /**
-     * The name of the animation.
-     *
-     * @public
-     */
-    protected animationName = 'x-staggered-fade-and-slide-';
-  }
+    inheritAttrs: false,
+    props: {
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      /**
+       * The name of the animation.
+       */
+      const animationName = 'x-staggered-fade-and-slide-';
+
+      const { name } = useDisableAnimation(animationName);
+
+      return { name };
+    }
+  });
 </script>
 
 <style lang="scss" scoped>
@@ -91,9 +95,9 @@ or the `stagger` props:
 
 ```vue
 <StaggeredFadeAndSlide tag="ul" :stagger="50">
-  <li>Element to animate</li>
-  <li>Element to animate</li>
-  <li>Element to animate</li>
+  <li key="1">Element to animate</li>
+  <li key="2">Element to animate</li>
+  <li key="3">Element to animate</li>
 </StaggeredFadeAndSlide>
 ```
 </docs>
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 13b8b05859..5e84c1b6bd 100644
--- a/packages/x-components/src/components/animations/staggering-transition-group.vue
+++ b/packages/x-components/src/components/animations/staggering-transition-group.vue
@@ -1,7 +1,15 @@
 <script lang="ts">
-  import Vue, { CreateElement, VNode } from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { noOp } from '../../utils';
+  import {
+    computed,
+    defineComponent,
+    h,
+    onBeforeUpdate,
+    onMounted,
+    onUpdated,
+    ref,
+    VNode
+  } from 'vue';
+  import { noOp } from '../../utils/function';
 
   /* eslint-disable @typescript-eslint/unbound-method */
   /**
@@ -10,408 +18,373 @@
    *
    * @public
    */
-  @Component
-  export default class StaggeringTransitionGroup extends Vue {
-    /**
-     * The name of the transition. Used to generate the CSS classes.
-     *
-     * @public
-     */
-    @Prop({ default: 'v' })
-    public name!: string;
-
-    /**
-     * The CSS move class name.
-     *
-     * @public
-     */
-    @Prop()
-    public moveClass!: string;
-
-    /**
-     * The tag of the node to render to the DOM.
-     *
-     * @public
-     */
-    @Prop({ default: 'div' })
-    public tag!: string;
-
-    /**
-     * The time in ms to stagger each item.
-     *
-     * @public
-     */
-    @Prop({ default: 25 })
-    public staggering!: number;
-
-    /**
-     * The CSS class for the moving transitions.
-     *
-     * @returns The move transition name.
-     * @internal
-     */
-    protected get moveClassName(): string {
-      return this.moveClass ?? `${this.name}-move`;
-    }
+  export default defineComponent({
+    name: 'StaggeringTransitionGroup',
+    props: {
+      /**
+       * The name of the transition. Used to generate the CSS classes.
+       */
+      name: {
+        type: String,
+        default: 'v'
+      },
+      /**
+       * The CSS move class name.
+       */
+      moveClass: String,
+      /**
+       * The tag of the node to render to the DOM.
+       */
+      tag: {
+        type: String,
+        default: 'div'
+      },
+      /**
+       * The time in ms to stagger each item.
+       */
+      staggering: {
+        type: Number,
+        default: 25
+      }
+    },
+    setup(props, { attrs, listeners, slots }) {
+      /**
+       * The reference to the element rendered by the component.
+       * Passed to the 'h' render function which will set the ref when the element is created.
+       */
+      const el = ref<HTMLElement>();
+
+      /**
+       * The CSS class for the moving transitions.
+       *
+       * @returns The move transition name.
+       */
+      const moveClassName = computed<string>(() => {
+        return props.moveClass ?? `${props.name}-move`;
+      });
 
-    /**
-     * The transition data contains the needed events and props to perform a transition using Vue
-     * virtual node's API.
-     *
-     * The `beforeLeave` hook is extended to also restore the previous position of the element using
-     * the position absolute.
-     * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay
-     * applied by the stagger.
-     *
-     * @returns The transition data for Vue virtual nodes.
-     * @internal
-     */
-    protected get transitionData(): TransitionData {
-      const transitionData: TransitionData = { ...this.$props, ...this.$attrs, ...this.$listeners };
-
-      transitionData.beforeLeave = this.addRestorePositionHook(transitionData.beforeLeave);
-      transitionData.afterEnter = this.addClearStaggeringCall(transitionData.afterEnter);
-      transitionData.afterLeave = this.addClearStaggeringCall(transitionData.afterLeave);
-
-      return transitionData;
-    }
+      /**
+       * The transition data contains the needed events and props to perform a transition using Vue
+       * virtual node's API.
+       *
+       * The `beforeLeave` hook is extended to also restore the previous position of the element using
+       * the position absolute.
+       * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay
+       * applied by the stagger.
+       *
+       * @returns The transition data for Vue virtual nodes.
+       */
+      const transitionData = computed<TransitionData>(() => {
+        const transitionData: TransitionData = { ...props, ...attrs, ...listeners };
+
+        transitionData.beforeLeave = addRestorePositionHook(transitionData.beforeLeave);
+        transitionData.afterEnter = addClearStaggeringCall(transitionData.afterEnter);
+        transitionData.afterLeave = addClearStaggeringCall(transitionData.afterLeave);
+
+        return transitionData;
+      });
 
-    /**
-     * The list of old virtual nodes, generated by the previous called render method.
-     *
-     * @internal
-     */
-    protected oldChildren!: TransitionVNode[];
-    /**
-     * The list of new virtual nodes, generated by the last called render method.
-     *
-     * @internal
-     */
-    protected newChildren!: TransitionVNode[];
-    /**
-     * A map containing the previous positions relative to the container, for each item
-     * rendered inside the slot of this component.
-     * This is used together with the `newPositions` to calculate the move transition.
-     *
-     * @internal
-     */
-    protected oldPositions!: WeakMap<Element, Bounds>;
-    /**
-     * A map containing the new positions relative to the container, for each item
-     * rendered inside the slot of this component.
-     * This is used together with the `newPositions` to calculate the move transition.
-     *
-     * @internal
-     */
-    protected newPositions!: WeakMap<Element, Bounds>;
-    /**
-     * A map containing the move cleanup functions pending to have been called. When invoked
-     * this functions remove all the styles and classes associated to the move transition.
-     *
-     * @internal
-     */
-    protected pendingCleanupMoveCallbacks!: WeakMap<Element, () => void>;
-    /**
-     * The counter for the stagger, used to calculate the delay for the transition of each child
-     * element. It is reset every time the render method is triggered.
-     *
-     * @internal
-     */
-    protected staggerCounter!: number;
-    /**
-     * The bounds of the container rendered using the `tag` prop. This is used to calculate the
-     * relative positions of each leaving child, which are then applied with the position absolute.
-     *
-     * @internal
-     */
-    protected wrapperBounds!: DOMRect;
-
-    beforeCreate(): void {
       // Initialize properties here to avoid making them reactive, which would cause infinite loops.
-      this.oldChildren = [];
-      this.newChildren = [];
-      this.oldPositions = new WeakMap();
-      this.newPositions = new WeakMap();
-      this.pendingCleanupMoveCallbacks = new WeakMap<Element, () => void>();
-      this.staggerCounter = 0;
-    }
+      /**
+       * The list of old virtual nodes, generated by the previous called render method.
+       */
+      let oldChildren: TransitionVNode[] = [];
+      /**
+       * The list of new virtual nodes, generated by the last called render method.
+       */
+      let newChildren: TransitionVNode[] = [];
+      /**
+       * A map containing the previous positions relative to the container, for each item
+       * rendered inside the slot of this component.
+       * This is used together with the `newPositions` to calculate the move transition.
+       */
+      const oldPositions: WeakMap<Element, Bounds> = new WeakMap();
+      /**
+       * A map containing the new positions relative to the container, for each item
+       * rendered inside the slot of this component.
+       * This is used together with the `newPositions` to calculate the move transition.
+       */
+      const newPositions: WeakMap<Element, Bounds> = new WeakMap();
+      /**
+       * A map containing the move cleanup functions pending to have been called. When invoked
+       * this functions remove all the styles and classes associated to the move transition.
+       */
+      const pendingCleanupMoveCallbacks: WeakMap<Element, () => void> = new WeakMap<
+        Element,
+        () => void
+      >();
+      /**
+       * The counter for the stagger, used to calculate the delay for the transition of each child
+       * element. It is reset every time the render method is triggered.
+       */
+      let staggerCounter = 0;
+      /**
+       * The bounds of the container rendered using the `tag` prop. This is used to calculate the
+       * relative positions of each leaving child, which are then applied with the position absolute.
+       */
+      let wrapperBounds: DOMRect;
+
+      onMounted(() => {
+        newChildren.forEach(applyStagger);
+      });
 
-    render(createElement: CreateElement): VNode {
-      this.staggerCounter = 0;
-      // New children are now the old ones
-      this.oldChildren = this.newChildren;
-      // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.
-      this.newChildren = (this.$slots.default ?? []).filter(this.isTransitionValidVNode);
-
-      // Apply transition data to both new and old nodes & store the position of the old nodes.
-      this.newChildren.forEach(this.addTransitionData);
-      this.oldChildren.forEach(this.syncOldNodes);
-
-      return createElement(
-        this.tag,
-        { staticClass: 'x-staggering-transition-group' },
-        this.newChildren
-      );
-    }
+      onBeforeUpdate(() => {
+        wrapperBounds = el.value!.getBoundingClientRect();
+      });
 
-    mounted(): void {
-      this.newChildren.forEach(this.applyStagger);
-    }
+      onUpdated(() => {
+        wrapperBounds = el.value!.getBoundingClientRect();
+        newChildren.forEach(recordNewPosition);
+        const { leavingNodes, stayingNodes, enteringNodes } = getNodesByTransitionType();
 
-    beforeUpdate(): void {
-      this.wrapperBounds = this.$el.getBoundingClientRect();
-    }
+        leavingNodes.forEach(vNode => {
+          applyStagger(vNode);
+          disableClickingEvents(vNode);
+        });
+        const movedChildren = stayingNodes.filter(applyTranslation);
+        const movedStagger = movedChildren.map(getNextTransitionDelay);
+        enteringNodes.forEach(applyStagger);
 
-    updated(): void {
-      this.wrapperBounds = this.$el.getBoundingClientRect();
-      this.newChildren.forEach(this.recordNewPosition);
-      const { leavingNodes, stayingNodes, enteringNodes } = this.getNodesByTransitionType();
+        // force reflow to put everything in position
+        document.body.getBoundingClientRect();
 
-      leavingNodes.forEach(vNode => {
-        this.applyStagger(vNode);
-        this.disableClickingEvents(vNode);
+        movedChildren.forEach(startMoveAnimation(movedStagger));
       });
-      const movedChildren = stayingNodes.filter(this.applyTranslation);
-      const movedStagger = movedChildren.map(this.getNextTransitionDelay);
-      enteringNodes.forEach(this.applyStagger);
-
-      // force reflow to put everything in position
-      document.body.getBoundingClientRect();
-
-      movedChildren.forEach(this.startMoveAnimation(movedStagger));
-    }
 
-    /**
-     * Extends the provided leave transition hook restoring the position of the element with an
-     * absolute position.
-     * Additionally, it removes the element position from the maps of positions.
-     *
-     * @param transitionHook - The leave transition hook to extend.
-     * @returns The new leave transition hook extended.
-     * @internal
-     */
-    protected addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {
-      return element => {
-        const { top, left, width, height } = this.oldPositions.get(element)!;
-        const { marginTop, marginLeft } = window.getComputedStyle(element);
-        const style = element.style;
-        style.position = 'absolute';
-        style.top = `${top - parseFloat(marginTop)}px`;
-        style.left = `${left - parseFloat(marginLeft)}px`;
-        style.width = `${width}px`;
-        style.height = `${height}px`;
-        this.newPositions.delete(element);
-        this.oldPositions.delete(element);
-        const pendingCallback = this.pendingCleanupMoveCallbacks.get(element);
-        pendingCallback?.();
-        transitionHook(element);
-      };
-    }
+      /**
+       * Extends the provided leave transition hook restoring the position of the element with an
+       * absolute position.
+       * Additionally, it removes the element position from the maps of positions.
+       *
+       * @param transitionHook - The leave transition hook to extend.
+       * @returns The new leave transition hook extended.
+       */
+      function addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {
+        return element => {
+          const { top, left, width, height } = oldPositions.get(element)!;
+          const { marginTop, marginLeft } = window.getComputedStyle(element);
+          const style = element.style;
+          style.position = 'absolute';
+          style.top = `${top - parseFloat(marginTop)}px`;
+          style.left = `${left - parseFloat(marginLeft)}px`;
+          style.width = `${width}px`;
+          style.height = `${height}px`;
+          newPositions.delete(element);
+          oldPositions.delete(element);
+          const pendingCallback = pendingCleanupMoveCallbacks.get(element);
+          pendingCallback?.();
+          transitionHook(element);
+        };
+      }
 
-    /**
-     * Extends the provided transition hook clearing the transition delay.
-     *
-     * @param transitionHook - The transition hook to extend.
-     * @returns The new transition hook, that also clears the transitionDelay from the element.
-     * @internal
-     */
-    protected addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {
-      return element => {
-        element.style.transitionDelay = '';
-        transitionHook(element);
-      };
-    }
+      /**
+       * Extends the provided transition hook clearing the transition delay.
+       *
+       * @param transitionHook - The transition hook to extend.
+       * @returns The new transition hook, that also clears the transitionDelay from the element.
+       */
+      function addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {
+        return element => {
+          element.style.transitionDelay = '';
+          transitionHook(element);
+        };
+      }
 
-    /**
-     * Returns if the vNode contains a non empty key, and a non empty tag.
-     *
-     * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a
-     * `key` property.
-     * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.
-     * @internal
-     */
-    protected isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {
-      // TODO Add warning with logger: <staggering-transition-group> children must be keyed.
-      return !!vNode.key && !!vNode.tag;
-    }
+      /**
+       * Returns if the vNode contains a non empty key, and a non empty tag.
+       *
+       * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a
+       * `key` property.
+       * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.
+       */
+      function isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {
+        // TODO Add warning with logger: <staggering-transition-group> children must be keyed.
+        return !!vNode.key && !!vNode.tag;
+      }
 
-    /**
-     * Adds the generated transition data to the vNode, creating the `data` property if necessary.
-     *
-     * @param vNode - The VNode to add the transition data to.
-     * @internal
-     */
-    protected addTransitionData(vNode: TransitionVNode): void {
-      if (!vNode.data) {
-        vNode.data = {};
+      /**
+       * Adds the generated transition data to the vNode, creating the `data` property if necessary.
+       *
+       * @param vNode - The VNode to add the transition data to.
+       */
+      function addTransitionData(vNode: TransitionVNode): void {
+        if (!vNode.data) {
+          vNode.data = {};
+        }
+        vNode.data.transition = transitionData.value;
       }
-      vNode.data.transition = this.transitionData;
-    }
 
-    /**
-     * Re-applies the transition data to an old node, just in case it changed from the previous
-     * render call. It also records the position of the node, to then calculate the move
-     * transitions.
-     *
-     * @param vNode - The vNode to add the transition data to, and record his current position as
-     * old.
-     * @internal
-     */
-    protected syncOldNodes(vNode: TransitionVNode): void {
-      // Synchronize transition data, in case it changed in the last frame.
-      // We can trust data to be defined because each new node has the transition applied
-      vNode.data!.transition = this.transitionData;
-      this.recordOldPosition(vNode);
-    }
+      /**
+       * Re-applies the transition data to an old node, just in case it changed from the previous
+       * render call. It also records the position of the node, to then calculate the move
+       * transitions.
+       *
+       * @param vNode - The vNode to add the transition data to, and record his current position as
+       * old.
+       */
+      function syncOldNodes(vNode: TransitionVNode): void {
+        // Synchronize transition data, in case it changed in the last frame.
+        // We can trust data to be defined because each new node has the transition applied
+        vNode.data!.transition = transitionData.value;
+        recordOldPosition(vNode);
+      }
 
-    /**
-     * Saves the position of the vNode in the map of old positions.
-     *
-     * @param vNode - The node to store its position.
-     * @internal
-     */
-    protected recordOldPosition(vNode: TransitionVNode): void {
-      this.oldPositions.set(vNode.elm, this.createRelativeBounds(vNode));
-    }
+      /**
+       * Saves the position of the vNode in the map of old positions.
+       *
+       * @param vNode - The node to store its position.
+       */
+      function recordOldPosition(vNode: TransitionVNode): void {
+        oldPositions.set(vNode.elm, createRelativeBounds(vNode));
+      }
 
-    /**
-     * Saves the position of the vNode in the map of new positions.
-     *
-     * @param vNode - The node to store its position.
-     * @internal
-     */
-    protected recordNewPosition(vNode: TransitionVNode): void {
-      this.newPositions.set(vNode.elm, this.createRelativeBounds(vNode));
-    }
+      /**
+       * Saves the position of the vNode in the map of new positions.
+       *
+       * @param vNode - The node to store its position.
+       */
+      function recordNewPosition(vNode: TransitionVNode): void {
+        newPositions.set(vNode.elm, createRelativeBounds(vNode));
+      }
 
-    /**
-     * Creates an object containing the position of the vNode relative to its container.
-     *
-     * @param vNode - The virtual node to store its relative position.
-     * @returns The relative bounds of the provided virtual node.
-     * @internal
-     */
-    protected createRelativeBounds(vNode: TransitionVNode): Bounds {
-      const { left, top, width, height } = vNode.elm.getBoundingClientRect();
-      const { left: wrapperLeft, top: wrapperTop } = this.wrapperBounds;
-      return {
-        left: left - wrapperLeft,
-        top: top - wrapperTop,
-        width,
-        height
-      };
-    }
+      /**
+       * Creates an object containing the position of the vNode relative to its container.
+       *
+       * @param vNode - The virtual node to store its relative position.
+       * @returns The relative bounds of the provided virtual node.
+       */
+      function createRelativeBounds(vNode: TransitionVNode): Bounds {
+        const { left, top, width, height } = vNode.elm.getBoundingClientRect();
+        const { left: wrapperLeft, top: wrapperTop } = wrapperBounds;
+        return {
+          left: left - wrapperLeft,
+          top: top - wrapperTop,
+          width,
+          height
+        };
+      }
 
-    /**
-     * Splits the children of the component into three groups:
-     * - Nodes that are leaving.
-     * - Nodes that are entering.
-     * - Nodes that stay.
-     *
-     * This is then used to apply the stagger in the correct order: leave -\> move -\> enter.
-     *
-     * @returns The children nodes, divided in different groups depending on if they are leaving,
-     * staying or entering.
-     * @internal
-     */
-    protected getNodesByTransitionType(): TransitionTypeNodes {
-      const leave = this.oldChildren.filter(child => !this.newPositions.has(child.elm));
-      const enter = this.newChildren.filter(child => !this.oldPositions.has(child.elm));
-      const stay = this.oldChildren.filter(child => this.newPositions.has(child.elm));
-      return {
-        leavingNodes: leave,
-        enteringNodes: enter,
-        stayingNodes: stay
-      };
-    }
+      /**
+       * Splits the children of the component into three groups:
+       * - Nodes that are leaving.
+       * - Nodes that are entering.
+       * - Nodes that stay.
+       *
+       * This is then used to apply the stagger in the correct order: leave -\> move -\> enter.
+       *
+       * @returns The children nodes, divided in different groups depending on if they are leaving,
+       * staying or entering.
+       */
+      function getNodesByTransitionType(): TransitionTypeNodes {
+        const leave = oldChildren.filter(child => !newPositions.has(child.elm));
+        const enter = newChildren.filter(child => !oldPositions.has(child.elm));
+        const stay = oldChildren.filter(child => newPositions.has(child.elm));
+        return {
+          leavingNodes: leave,
+          enteringNodes: enter,
+          stayingNodes: stay
+        };
+      }
 
-    /**
-     * Applies an incremental delay to the virtual node element.
-     *
-     * @param vNode - The virtual node to apply the stagger to.
-     * @internal
-     */
-    protected applyStagger(vNode: TransitionVNode): void {
-      vNode.elm.style.transitionDelay = this.getNextTransitionDelay();
-    }
+      /**
+       * Applies an incremental delay to the virtual node element.
+       *
+       * @param vNode - The virtual node to apply the stagger to.
+       */
+      function applyStagger(vNode: TransitionVNode): void {
+        vNode.elm.style.transitionDelay = getNextTransitionDelay();
+      }
 
-    /**
-     * Disables listening to click events in a virtual node element.
-     *
-     * @remarks This is done to avoid letting the user click elements that are performing the moving
-     * animation to leave the DOM but are still rendered.
-     *
-     * @param vNode - The virtual node to disable listening to click events.
-     * @internal
-     */
-    protected disableClickingEvents(vNode: TransitionVNode): void {
-      vNode.elm.style.pointerEvents = 'none';
-    }
+      /**
+       * Disables listening to click events in a virtual node element.
+       *
+       * @remarks This is done to avoid letting the user click elements that are performing the moving
+       * animation to leave the DOM but are still rendered.
+       *
+       * @param vNode - The virtual node to disable listening to click events.
+       */
+      function disableClickingEvents(vNode: TransitionVNode): void {
+        vNode.elm.style.pointerEvents = 'none';
+      }
 
-    /**
-     * Calculates the next transition delay property, incrementing the `staggerCounter` property
-     * each time it is called.
-     *
-     * @returns The value for the next element `style.transitionDelay` property.
-     * @internal
-     */
-    protected getNextTransitionDelay(): string {
-      return `${this.staggerCounter++ * this.staggering}ms`;
-    }
+      /**
+       * Calculates the next transition delay property, incrementing the `staggerCounter` property
+       * each time it is called.
+       *
+       * @returns The value for the next element `style.transitionDelay` property.
+       */
+      function getNextTransitionDelay(): string {
+        return `${staggerCounter++ * props.staggering}ms`;
+      }
 
-    /**
-     * Calculates if the virtual node should have a move transition. If its has it, then it
-     * applies it immediately using the `style.transform`.
-     *
-     * @param vNode - The virtual node to calculate if it should have a move transition.
-     * @returns True when a move transition was applied to the virtual node.
-     * @internal
-     */
-    protected applyTranslation(vNode: TransitionVNode): boolean {
-      const oldPosition = this.oldPositions.get(vNode.elm as Element)!;
-      const newPosition = this.newPositions.get(vNode.elm as Element)!;
-      const dx = oldPosition.left - newPosition.left;
-      const dy = oldPosition.top - newPosition.top;
-      if (dx !== 0 || dy !== 0) {
-        const style = vNode.elm.style;
-        style.transform = `translate3d(${dx}px,${dy}px,0)`;
-        style.transitionDuration = '0s';
-        return true;
+      /**
+       * Calculates if the virtual node should have a move transition. If its has it, then it
+       * applies it immediately using the `style.transform`.
+       *
+       * @param vNode - The virtual node to calculate if it should have a move transition.
+       * @returns True when a move transition was applied to the virtual node.
+       */
+      function applyTranslation(vNode: TransitionVNode): boolean {
+        const oldPosition = oldPositions.get(vNode.elm as Element)!;
+        const newPosition = newPositions.get(vNode.elm as Element)!;
+        const dx = oldPosition.left - newPosition.left;
+        const dy = oldPosition.top - newPosition.top;
+        if (dx !== 0 || dy !== 0) {
+          const style = vNode.elm.style;
+          style.transform = `translate3d(${dx}px,${dy}px,0)`;
+          style.transitionDuration = '0s';
+          return true;
+        }
+        return false;
       }
-      return false;
-    }
 
-    /**
-     * Generates a function to start the moving animations to each node that it needs them with the
-     * provided stagger.
-     *
-     * @param moveStagger - A list containing the delay to add to each node.
-     * @returns A function that starts the moving animation with the provided stagger to a single
-     * virtual node.
-     * @internal
-     */
-    protected startMoveAnimation(
-      moveStagger: string[]
-    ): (vNode: TransitionVNode, index: number) => void {
-      return (vNode, index) => {
-        const element = vNode.elm;
-        const style = element.style;
-        element.classList.add(this.moveClassName);
-        style.transform = style.transitionDuration = '';
-        style.transitionDelay = moveStagger[index];
-        const cleanMoveTransition = (event?: TransitionEvent): void => {
-          if (!event || (event.target === element && /transform$/.test(event.propertyName))) {
-            element.removeEventListener('transitionend', cleanMoveTransition);
-            element.style.transitionDelay = '';
-            element.classList.remove(this.moveClassName);
-            this.pendingCleanupMoveCallbacks.delete(element);
-          }
+      /**
+       * Generates a function to start the moving animations to each node that it needs them with the
+       * provided stagger.
+       *
+       * @param moveStagger - A list containing the delay to add to each node.
+       * @returns A function that starts the moving animation with the provided stagger to a single
+       * virtual node.
+       */
+      function startMoveAnimation(
+        moveStagger: string[]
+      ): (vNode: TransitionVNode, index: number) => void {
+        return (vNode, index) => {
+          const element = vNode.elm;
+          const style = element.style;
+          element.classList.add(moveClassName.value);
+          style.transform = style.transitionDuration = '';
+          style.transitionDelay = moveStagger[index];
+          const cleanMoveTransition = (event?: TransitionEvent): void => {
+            if (!event || (event.target === element && /transform$/.test(event.propertyName))) {
+              element.removeEventListener('transitionend', cleanMoveTransition);
+              element.style.transitionDelay = '';
+              element.classList.remove(moveClassName.value);
+              pendingCleanupMoveCallbacks.delete(element);
+            }
+          };
+          pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);
+          element.addEventListener('transitionend', cleanMoveTransition);
         };
-        this.pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);
-        element.addEventListener('transitionend', cleanMoveTransition);
+      }
+
+      return () => {
+        staggerCounter = 0;
+        // New children are now the old ones
+        oldChildren = newChildren;
+        // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.
+        newChildren = (
+          (typeof slots.default === 'function' ? slots.default() : slots.default) ?? []
+        ).filter(isTransitionValidVNode);
+
+        // Apply transition data to both new and old nodes & store the position of the old nodes.
+        newChildren.forEach(addTransitionData);
+        oldChildren.forEach(syncOldNodes);
+
+        return h(props.tag, { ref: el, class: 'x-staggering-transition-group' }, newChildren);
       };
     }
-  }
+  });
 
   /**
    * Contains arrays of nodes, splitted by the action they should have.
diff --git a/packages/x-components/src/components/animations/use-disable-animation.ts b/packages/x-components/src/components/animations/use-disable-animation.ts
new file mode 100644
index 0000000000..3699717c98
--- /dev/null
+++ b/packages/x-components/src/components/animations/use-disable-animation.ts
@@ -0,0 +1,26 @@
+import { computed, inject, ref } from 'vue';
+import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
+
+/**
+ * Composable to ease disabling animations.
+ *
+ * @param animationName - The name of the animation.
+ * @returns Composable with the computed name of the animation.
+ *
+ * @public
+ */
+export function useDisableAnimation(animationName: string) {
+  /**
+   * Flag to disable the animation.
+   */
+  const disableAnimation = inject(DISABLE_ANIMATIONS_KEY as string, ref(false));
+
+  /**
+   * The animation's name based on the DISABLE_ANIMATIONS_KEY flag.
+   *
+   * @returns The animation name.
+   */
+  const name = computed(() => (disableAnimation.value ? '__no-animation__' : animationName));
+
+  return { name };
+}
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
index bb3c969a0c..23e2ec1da4 100644
--- a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
+++ b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
@@ -47,7 +47,7 @@ describe('testing plugin alias', () => {
       status: {
         identifierResults: 'initial', // It is already registered by the `identifierResultsXModule` import itself
         nextQueries: 'initial', // It is already registered by the `nextQueriesXModule` import itself
-        popularSearches: undefined,
+        popularSearches: 'initial', // It is already registered by the `popularSearchesXModule` import itself
         querySuggestions: 'initial', // It is already registered by the `querySuggestionsXModule` import itself
         recommendations: 'initial', // It is already registered by the `recommendationsXModule` import itself
         relatedTags: 'initial', // It is already registered by the `relatedTagsXModule` import itself
diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
index 5376cdff4c..a226e19003 100644
--- a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
+++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
@@ -40,7 +40,7 @@ describe('testing extra params component', () => {
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 1234 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(1);
 
@@ -48,7 +48,7 @@ describe('testing extra params component', () => {
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 5678 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(2);
   });
diff --git a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
index d24dc6301e..4d96cddc97 100644
--- a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { State, xComponentMixin, XEmit } from '../../../components';
+  import { defineComponent, PropType, watch } from 'vue';
   import { extraParamsXModule } from '../x-module';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values
@@ -11,40 +11,34 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(extraParamsXModule)]
-  })
-  export default class ExtraParams extends Vue {
-    /**
-     * Emits the initial extra params, overriding with the state extra params, just in case, those
-     * values were already set by XComponents initialization (url, plugin config, etc.).
-     */
-    created(): void {
-      this.$x.emit('ExtraParamsInitialized', { ...this.values });
-      this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });
-    }
 
-    /**
-     * (Required) A Dictionary where the keys are the extra param names and its values.
-     *
-     * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the
-     * component is rendered or the values changed.
-     *
-     * @public
-     */
-    @XEmit('ExtraParamsProvided', { immediate: false, deep: true })
-    @Prop({ required: true })
-    public values!: Dictionary<unknown>;
+  export default defineComponent({
+    name: 'ExtraParams',
+    xModule: extraParamsXModule.name,
+    props: {
+      values: {
+        type: Object as PropType<Dictionary<unknown>>,
+        required: true
+      }
+    },
+    setup(props) {
+      const { params } = useState('extraParams', ['params']);
+      const $x = use$x();
 
-    /**
-     * State extra params. Used to override the initial extra params.
-     */
-    @State('extraParams', 'params')
-    public storeExtraParams!: Dictionary<unknown>;
+      $x.emit('ExtraParamsInitialized', { ...props.values });
+      $x.emit('ExtraParamsProvided', { ...props.values, ...params.value });
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+      watch(
+        () => props.values,
+        values => {
+          $x.emit('ExtraParamsProvided', { ...values });
+        },
+        { deep: true }
+      );
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
index a6e86d798c..b62ed09319 100644
--- a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
@@ -4,87 +4,59 @@
 
 <script lang="ts">
   import { forEach, Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Inject, Prop, Watch } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { defineComponent, inject, PropType, ref, watch } from 'vue';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { extraParamsXModule } from '../x-module';
   import ExtraParams from './extra-params.vue';
 
-  /**
-   * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request
-   * objects of every x-module.
-   *
-   * @public
-   */
-  @Component({
-    components: { ExtraParams },
-    mixins: [xComponentMixin(extraParamsXModule)]
-  })
-  export default class SnippetConfigExtraParams extends Vue {
-    /**
-     * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
-     *
-     * @internal
-     */
-    @Inject('snippetConfig')
-    public snippetConfig!: SnippetConfig;
-
-    /**
-     * A Dictionary where the keys are the extra param names and its values.
-     *
-     * @public
-     */
-    @Prop()
-    protected values?: Dictionary<unknown>;
-
-    /**
-     * Custom object containing the extra params from the snippet config and the values prop.
-     *
-     * @remarks This object keeps manually the desired snippet config properties to avoid
-     * unnecessary re-renders.
-     *
-     * @returns A dictionary with the extra params.
-     *
-     * @internal
-     */
-    protected extraParams: Dictionary<unknown> = {};
+  export default defineComponent({
+    name: 'SnippetConfigExtraParams',
+    xModule: extraParamsXModule.name,
+    components: {
+      ExtraParams
+    },
+    props: {
+      values: {
+        type: Object as PropType<Dictionary<unknown>>
+      },
+      excludedExtraParams: {
+        type: Array as PropType<Array<keyof SnippetConfig>>,
+        default: (): Array<keyof SnippetConfig> => [
+          'callbacks',
+          'productId',
+          'uiLang',
+          'consent',
+          'documentDirection',
+          'filters',
+          'isSpa',
+          'queriesPreview'
+        ]
+      }
+    },
+    setup(props) {
+      const snippetConfig = inject('snippetConfig') as SnippetConfig;
+      const extraParams = ref({});
 
-    /**
-     * Updates the extraParams object when the snippet config or the values prop changes.
-     *
-     * @internal
-     */
-    @Watch('snippetConfig', { deep: true, immediate: true })
-    @Watch('values', { deep: true, immediate: true })
-    syncExtraParams(): void {
-      forEach({ ...this.values, ...this.snippetConfig }, (name, value) => {
-        if (!this.excludedExtraParams.includes(name)) {
-          this.$set(this.extraParams, name, value);
+      watch(
+        [() => snippetConfig, () => props.values],
+        () => {
+          forEach({ ...props.values, ...snippetConfig }, (name, value) => {
+            if (!props.excludedExtraParams.includes(name)) {
+              extraParams.value = { ...extraParams.value, [name]: value };
+            }
+          });
+        },
+        {
+          deep: true,
+          immediate: true
         }
-      });
-    }
+      );
 
-    /**
-     * Collection of properties from the snippet config to exclude from the
-     * extra params object.
-     *
-     * @public
-     */
-    @Prop({
-      default: (): Array<keyof SnippetConfig> => [
-        'callbacks',
-        'productId',
-        'uiLang',
-        'consent',
-        'documentDirection',
-        'filters',
-        'isSpa',
-        'queriesPreview'
-      ]
-    })
-    protected excludedExtraParams!: Array<keyof SnippetConfig>;
-  }
+      return {
+        extraParams
+      };
+    }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/extra-params/x-module.ts b/packages/x-components/src/x-modules/extra-params/x-module.ts
index 241efc6bd8..26033bcecc 100644
--- a/packages/x-components/src/x-modules/extra-params/x-module.ts
+++ b/packages/x-components/src/x-modules/extra-params/x-module.ts
@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/index';
 import { extraParamsEmitters } from './store/emitters';
 import { extraParamsXStoreModule } from './store/module';
 import { ExtraParamsXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const extraParamsXModule: ExtraParamsXModule = {
   storeEmitters: extraParamsEmitters,
   wiring: extraParamsWiring
 };
+
+XPlugin.registerXModule(extraParamsXModule);
diff --git a/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue b/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue
index d34c8811eb..63ab6d9000 100644
--- a/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue
+++ b/packages/x-components/src/x-modules/facets/components/facets/facets-provider.vue
@@ -1,15 +1,12 @@
 <script lang="ts">
   import { Facet, Filter, isHierarchicalFacet } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import { XOn } from '../../../../components';
-  import { xComponentMixin } from '../../../../components/x-component.mixin';
+  import { computed, defineComponent, h, PropType, Ref, ref, watch } from 'vue';
   import { clone } from '../../../../utils';
   import { areFiltersDifferent } from '../../../../utils/filters';
-  import { FacetsGroup } from '../../service/types';
   import { GroupId } from '../../store/types';
   import { flatHierarchicalFilters } from '../../utils';
   import { facetsXModule } from '../../x-module';
+  import { use$x } from '../../../../composables/use-$x';
 
   /**
    * This component allows to provide facets by prop, to add them to the state of the
@@ -19,97 +16,105 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class FacetsProvider extends Vue {
-    /**
-     * An facet group identifier to distinguish the provided facets from other facets like the
-     * `Search X-Module` facets.
-     *
-     * @public
-     */
-    @Prop({ default: 'provided-facets' })
-    public groupId!: GroupId;
-
-    /**
-     * The facets to provide to the `Facets X-Module` state. They have to include the
-     * {@link @empathyco/x-types#Filter}.
-     *
-     * @internal
-     */
-    @Prop({ required: true })
-    public facets!: Facet[];
-
-    /**
-     * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.
-     * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.
-     *
-     * @internal
-     */
-    protected selectedFilters: Filter[] | null = null;
-
-    /**
-     * A computed property to group the facets and the groupId. This is used by the watcher.
-     *
-     * @returns The FacetGroup with the facets and the group id.
-     *
-     * @internal
-     */
-    protected get facetsGroup(): FacetsGroup {
-      return { id: this.groupId, facets: this.facets };
-    }
-
-    /**
-     * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes
-     * the selected filters.
-     *
-     * @param selectedFilters - The new list of selected filters.
-     * @internal
-     */
-    @XOn('SelectedFiltersChanged')
-    emitSelectedFiltersChanged(selectedFilters: Filter[]): void {
-      if (
-        this.selectedFilters === null ||
-        areFiltersDifferent(this.selectedFilters, selectedFilters)
-      ) {
-        this.$x.emit('UserChangedSelectedFilters', selectedFilters);
+  export default defineComponent({
+    name: 'FacetsProvider',
+    xModule: facetsXModule.name,
+    props: {
+      /**
+       * An facet group identifier to distinguish the provided facets from other facets like the
+       * `Search X-Module` facets.
+       *
+       * @public
+       */
+      groupId: {
+        type: String as PropType<GroupId>,
+        default: 'provided-facets'
+      },
+      /**
+       * The facets to provide to the `Facets X-Module` state. They have to include the
+       * {@link @empathyco/x-types#Filter}.
+       *
+       * @internal
+       */
+      facets: {
+        type: Array as PropType<Facet[]>,
+        required: true
       }
-      this.selectedFilters = null;
-    }
+    },
+    setup: function (props) {
+      const $x = use$x();
+
+      /**
+       * Temporarily stores the selected filters from the {@link FacetsProvider.facets} prop.
+       * This is necessary to handle the {@link FacetsXEvents.UserChangedSelectedFilters} event.
+       *
+       * @internal
+       */
+      const selectedFilters: Ref<Filter[] | null> = ref(null);
+
+      /**
+       * A computed property to group the facets and the groupId. This is used by the watcher.
+       *
+       * @returns The FacetGroup with the facets and the group id.
+       *
+       * @internal
+       */
+      const facetsGroup = computed(() => ({ id: props.groupId, facets: props.facets }));
+
+      /**
+       * Emits the {@link FacetsXEvents.UserChangedSelectedFilters} event when the user changes
+       * the selected filters.
+       *
+       * @param selectedFilters - The new list of selected filters.
+       * @internal
+       */
+      $x.on('SelectedFiltersChanged', false).subscribe((selectedFiltersParams: Filter[]) => {
+        if (
+          selectedFilters.value === null ||
+          areFiltersDifferent(selectedFilters.value, selectedFiltersParams)
+        ) {
+          $x.emit('UserChangedSelectedFilters', selectedFiltersParams);
+        }
+        selectedFilters.value = null;
+      });
+
+      /**
+       * Extracts the selected filters from the facets and stores them in the
+       * {@link FacetsProvider.selectedFilters} property.
+       *
+       * @param facets - The facets from whom extract the selected filters.
+       * @internal
+       */
+      const extractSelectedFilters = (facets: Facet[]) => {
+        selectedFilters.value = facets
+          .flatMap(facet =>
+            isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters
+          )
+          .filter(filter => filter.selected);
+      };
 
-    /**
-     * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the
-     * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected
-     * filters.
-     */
-    @Watch('facetsGroup', { immediate: true })
-    provideFacets(): void {
-      if (this.facetsGroup.facets) {
-        const facetsGroupClone = clone(this.facetsGroup);
-        this.$x.emit('FacetsGroupProvided', facetsGroupClone);
-        this.extractSelectedFilters(this.facets);
-      }
-    }
+      /**
+       * Emits the {@link FacetsXEvents.FacetsGroupProvided} event with the
+       * {@link FacetsProvider.facetsGroup} as payload. It also extracts and saves the selected
+       * filters.
+       */
+      watch(
+        () => facetsGroup.value,
+        () => {
+          if (facetsGroup.value.facets) {
+            const facetsGroupClone = clone(facetsGroup.value);
+            $x.emit('FacetsGroupProvided', facetsGroupClone);
+            extractSelectedFilters(props.facets);
+          }
+        },
+        { immediate: true }
+      );
 
-    /**
-     * Extracts the selected filters from the facets and stores them in the
-     * {@link FacetsProvider.selectedFilters} property.
-     *
-     * @param facets - The facets from whom extract the selected filters.
-     * @internal
-     */
-    protected extractSelectedFilters(facets: Facet[]): void {
-      this.selectedFilters = facets
-        .flatMap(facet =>
-          isHierarchicalFacet(facet) ? flatHierarchicalFilters(facet.filters) : facet.filters
-        )
-        .filter(filter => filter.selected);
+      return () => {
+        return h();
+      };
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/popular-searches/components/popular-search.vue b/packages/x-components/src/x-modules/popular-searches/components/popular-search.vue
index b92927dc4a..1170ed2a2d 100644
--- a/packages/x-components/src/x-modules/popular-searches/components/popular-search.vue
+++ b/packages/x-components/src/x-modules/popular-searches/components/popular-search.vue
@@ -19,10 +19,8 @@
 
 <script lang="ts">
   import { Suggestion } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  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 { popularSearchesXModule } from '../x-module';
 
@@ -33,31 +31,35 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'PopularSearch',
+    xModule: popularSearchesXModule.name,
     components: { BaseSuggestion },
-    mixins: [xComponentMixin(popularSearchesXModule)]
-  })
-  export default class PopularSearch extends Vue {
-    /**
-     * The suggestion to render and use in the default slot.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected suggestion!: Suggestion;
+    props: {
+      /**
+       * The suggestion to render and use in the default slot.
+       *
+       * @public
+       */
+      suggestion: {
+        type: Object as PropType<Suggestion>,
+        required: true
+      }
+    },
+    setup(props) {
+      /**
+       * Events list which are going to be emitted when a popular search is selected.
+       *
+       * @returns The {@link XEvent} to emit.
+       * @public
+       */
+      const events = computed(
+        (): Partial<XEventsTypes> => ({ UserSelectedAPopularSearch: props.suggestion })
+      );
 
-    /**
-     * Events list which are going to be emitted when a popular search is selected.
-     *
-     * @returns The {@link XEvent} to emit.
-     * @public
-     */
-    protected get events(): Partial<XEventsTypes> {
-      return {
-        UserSelectedAPopularSearch: this.suggestion
-      };
+      return { events };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
index 066cf60297..c76a139d4a 100644
--- a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
+++ b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
@@ -32,13 +32,10 @@
 </template>
 
 <script lang="ts">
-  import { Suggestion } 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 { popularSearchesXModule } from '../x-module';
+  import { useGetter } from '../../../composables/use-getter';
   import PopularSearch from './popular-search.vue';
 
   /**
@@ -49,20 +46,25 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'PopularSearches',
+    xModule: popularSearchesXModule.name,
+    components: {
+      PopularSearch,
+      BaseSuggestions
+    },
     inheritAttrs: false,
-    components: { PopularSearch, BaseSuggestions },
-    mixins: [xComponentMixin(popularSearchesXModule)]
-  })
-  export default class PopularSearches extends Vue {
-    /**
-     * The list of popular searches.
-     *
-     * @internal
-     */
-    @Getter('popularSearches', 'popularSearches')
-    public popularSearches!: Suggestion[];
-  }
+    setup() {
+      /**
+       * The list of popular searches.
+       *
+       * @internal
+       */
+      const { popularSearches } = useGetter('popularSearches', ['popularSearches']);
+
+      return { popularSearches };
+    }
+  });
 </script>
 
 <!--eslint-disable max-len -->
diff --git a/packages/x-components/src/x-modules/popular-searches/x-module.ts b/packages/x-components/src/x-modules/popular-searches/x-module.ts
index b7abb3f6ff..7b75d9cb4a 100644
--- a/packages/x-components/src/x-modules/popular-searches/x-module.ts
+++ b/packages/x-components/src/x-modules/popular-searches/x-module.ts
@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/x-plugin';
 import { popularSearchesEmitters } from './store/emitters';
 import { popularSearchesXStoreModule } from './store/module';
 import { PopularSearchesXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const popularSearchesXModule: PopularSearchesXModule = {
   storeEmitters: popularSearchesEmitters,
   wiring: popularSearchesWiring
 };
+
+XPlugin.registerXModule(popularSearchesXModule);
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
index 5a27b1e247..df8e415a37 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-button.vue
@@ -13,14 +13,12 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { Dictionary } from '@empathyco/x-utils';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent, PropType } from 'vue';
   import { QueryPreviewInfo } from '../store/types';
   import { XEventsTypes } from '../../../wiring/events.types';
-  import { BaseEventButton, xComponentMixin } from '../../../components';
+  import { BaseEventButton } from '../../../components';
   import { queriesPreviewXModule } from '../x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * Component containing an event button that emits
@@ -31,55 +29,61 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'QueryPreviewButton',
+    xModule: queriesPreviewXModule.name,
     components: { BaseEventButton },
-    mixins: [xComponentMixin(queriesPreviewXModule)]
-  })
-  export default class QueryPreviewButton extends Vue {
-    /**
-     * The information about the request of the query preview.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected queryPreviewInfo!: QueryPreviewInfo;
-
-    /**
-     * We use the module extra params to combine them with the query preview's extra params.
-     */
-    @State('queriesPreview', 'params')
-    public params!: Dictionary<unknown>;
-
-    /**
-     * The provided query preview with the base extra params from the module merged in.
-     *
-     * @returns The query preview info with the base extra params merged in.
-     * @public
-     */
-    protected get fullQueryPreviewInfo(): QueryPreviewInfo {
-      return {
-        ...this.queryPreviewInfo,
-        extraParams: {
-          ...this.params,
-          ...this.queryPreviewInfo.extraParams
-        },
-        filters: this.queryPreviewInfo.filters
-      };
-    }
+    props: {
+      /**
+       * The information about the request of the query preview.
+       *
+       * @public
+       */
+      queryPreviewInfo: {
+        type: Object as PropType<QueryPreviewInfo>,
+        required: true
+      }
+    },
+    setup(props) {
+      /**
+       * We use the module extra params to combine them with the query preview's extra params.
+       */
+      const { params } = useState('queriesPreview', ['params']);
+
+      /**
+       * The provided query preview with the base extra params from the module merged in.
+       *
+       * @returns The query preview info with the base extra params merged in.
+       * @public
+       */
+      const fullQueryPreviewInfo = computed(
+        (): QueryPreviewInfo => ({
+          ...props.queryPreviewInfo,
+          extraParams: {
+            ...params.value,
+            ...props.queryPreviewInfo.extraParams
+          },
+          filters: props.queryPreviewInfo.filters
+        })
+      );
+
+      /**
+       * List of events to emit by the BaseEventButton.
+       *
+       * @returns An object with the event and payload.
+       *
+       * @internal
+       */
+      const events = computed(
+        (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value })
+      );
 
-    /**
-     * List of events to emit by the BaseEventButton.
-     *
-     * @returns An object with the event and payload.
-     *
-     * @internal
-     */
-    protected get events(): Partial<XEventsTypes> {
       return {
-        UserAcceptedAQueryPreview: this.fullQueryPreviewInfo
+        fullQueryPreviewInfo,
+        events
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">