diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue
index 3874309a8a..b9f3dffde1 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue
+++ b/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue
@@ -4,14 +4,27 @@
     <Facets :renderableFacets="facetsIds.join(',')">
       <template #default="{ facet }">
         <h3>{{ facet.label }}</h3>
-        <ul>
-          <li v-for="filter in facet.filters" :key="filter.id">
-            <BaseEventButton :events="{ UserClickedAFilter: filter }">
-              {{ filter.label }}
-              <span v-if="filter.selected">✅</span>
-            </BaseEventButton>
-          </li>
-        </ul>
+
+        <ExcludeFiltersWithNoResults :filters="facet.filters">
+          <SortedFilters>
+            <FiltersSearch :data-test="`filters-search-${facet.id}`">
+              <SlicedFilters :max="4" :data-test="`${facet.label}-sliced-filters`">
+                <FiltersList
+                  v-slot="{
+                    // eslint-disable-next-line vue/no-unused-vars
+                    filter
+                  }"
+                >
+                  <BaseEventButton :events="{ UserClickedAFilter: filter }">
+                    {{ filter.label }}
+                    {{ filter.totalResults }}
+                    <span v-if="filter.selected">✅</span>
+                  </BaseEventButton>
+                </FiltersList>
+              </SlicedFilters>
+            </FiltersSearch>
+          </SortedFilters>
+        </ExcludeFiltersWithNoResults>
       </template>
     </Facets>
     <h2>SelectedFilters</h2>
@@ -39,6 +52,11 @@
   import Facets from '../../../../../x-components/src/x-modules/facets/components/facets/facets.vue';
   import SelectedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/selected-filters.vue';
   import SelectedFiltersList from '../../../../../x-components/src/x-modules/facets/components/lists/selected-filters-list.vue';
+  import SortedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sorted-filters.vue';
+  import SlicedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sliced-filters.vue';
+  import FiltersSearch from '../../../../../x-components/src/x-modules/facets/components/lists/filters-search.vue';
+  import ExcludeFiltersWithNoResults from '../../../../../x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue';
+  import FiltersList from '../../../../../x-components/src/x-modules/facets/components/lists/filters-list.vue';
 
-  const facetsIds = ['gender', 'brand'];
+  const facetsIds = ['gender', 'brand', 'category'];
 </script>
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts b/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts
index 9a4ba59efc..6e2c86a0c9 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts
@@ -16,7 +16,12 @@ const facets: Record<Facet['id'], Facet> = {
   color: createSimpleFacetStub('color', createFilter => [
     createFilter('red', true),
     createFilter('blue', false)
-  ])
+  ]),
+  category: createSimpleFacetStub('category', createFilter =>
+    ['dress', 'floral', 'skirt', 'print', 'midi', 'fitted', 'short', 'long'].map((query, index) =>
+      createFilter(query, false, index)
+    )
+  )
 };
 const filters = arrayToObject(
   Object.values(facets).flatMap(facet => facet.filters),
diff --git a/packages/x-components/src/views/home/aside.vue b/packages/x-components/src/views/home/aside.vue
index 81ab1993e8..6b3ffade0e 100644
--- a/packages/x-components/src/views/home/aside.vue
+++ b/packages/x-components/src/views/home/aside.vue
@@ -35,7 +35,7 @@
             <ChevronDown />
           </template>
           <!-- Filters -->
-          <SlicedFilters max="4" :filters="facet.filters">
+          <SlicedFilters :max="4" :filters="facet.filters">
             <FiltersList v-slot="{ filter }">
               <HierarchicalFilter
                 :filter="filter"
diff --git a/packages/x-components/src/x-modules/facets/components/index.ts b/packages/x-components/src/x-modules/facets/components/index.ts
index 9b21fc831a..a41c4bc04d 100644
--- a/packages/x-components/src/x-modules/facets/components/index.ts
+++ b/packages/x-components/src/x-modules/facets/components/index.ts
@@ -14,7 +14,6 @@ export { default as PreselectedFilters } from './preselected-filters.vue';
 // Lists
 // eslint-disable-next-line max-len
 export { default as ExcludeFiltersWithNoResults } from './lists/exclude-filters-with-no-results.vue';
-export { default as FiltersInjectionMixin } from './lists/filters-injection.mixin';
 export { default as FiltersList } from './lists/filters-list.vue';
 export { default as FiltersSearch } from './lists/filters-search.vue';
 export { default as SelectedFilters } from './lists/selected-filters.vue';
diff --git a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
index 56c29d9e6e..bf29ecb616 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
@@ -1,11 +1,9 @@
 <script lang="ts">
   import { Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { CreateElement, VNode } from 'vue';
-  import { mixins } from 'vue-class-component';
-  import { Component } from 'vue-property-decorator';
-  import { xComponentMixin, XProvide } from '../../../../components';
+  import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { facetsXModule } from '../../x-module';
-  import FiltersInjectionMixin from './filters-injection.mixin';
+  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * The `ExcludeFiltersWithNoResults` component filters the provided list of filters, excluding
@@ -17,27 +15,47 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class ExcludeFiltersWithNoResults extends mixins(FiltersInjectionMixin) {
-    /**
-     * Removes the filters that have exactly 0 results associated.
-     *
-     * @returns A sublist of the filters prop, excluding the ones with no results.
-     * @internal
-     */
-    @XProvide('filters')
-    public get filtersWithResults(): Filter[] {
-      return this.renderedFilters.filter(
-        filter => !isBooleanFilter(filter) || filter.totalResults !== 0
-      );
-    }
+  export default defineComponent({
+    name: 'ExcludeFiltersWithNoResults',
+    xModule: facetsXModule.name,
+    props: {
+      /**
+       * The list of filters to be rendered as slots.
+       *
+       * @public
+       */
+      filters: Array as PropType<Filter[]>,
+
+      /**
+       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
+       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.
+       *
+       * @public
+       */
+      parentId: {
+        type: String as PropType<Filter['id']>
+      }
+    },
+    setup(props, { slots }) {
+      useRegisterXModule(facetsXModule);
+      const renderedFilters = useFiltersInjection(props);
+
+      /**
+       * Removes the filters that have exactly 0 results associated.
+       *
+       * @returns A sublist of the filters prop, excluding the ones with no results.
+       * @internal
+       */
+      const filtersWithResults = computed((): Filter[] => {
+        return renderedFilters.value.filter(
+          filter => !isBooleanFilter(filter) || filter.totalResults !== 0
+        );
+      });
+      provide('filters', filtersWithResults);
 
-    render(h: CreateElement): VNode {
-      return this.$scopedSlots.default?.({ filters: this.filtersWithResults })?.[0] ?? h();
+      return () => (slots.default ? slots.default({ filters: filtersWithResults.value }) : h());
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
index edfd823626..52f1dde2f3 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
@@ -23,13 +23,13 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../../components';
+  import { computed, defineComponent, PropType } from 'vue';
+  import { Filter } from '@empathyco/x-types';
   import { VueCSSClasses } from '../../../../utils/types';
   import { facetsXModule } from '../../x-module';
-  import FiltersInjectionMixin from './filters-injection.mixin';
+  import { AnimationProp } from '../../../../types/animation-prop';
+  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * Renders a list with a list item per each
@@ -38,51 +38,83 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class FiltersList extends mixins(FiltersInjectionMixin) {
-    /**
-     * Animation component that will be used to animate the base filters.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-
-    /**
-     * It handles if the filters should be rendered.
-     *
-     * @returns True if there are filters.
-     *
-     * @public
-     */
-    protected get hasFiltersToRender(): boolean {
-      return this.renderedFilters?.length > 0;
-    }
-
-    /**
-     * Checks if at least one filter is selected.
-     *
-     * @returns True if at least one filter is selected. False otherwise.
-     * @internal
-     */
-    protected get hasSelectedFilters(): boolean {
-      return !!this.renderedFilters?.some(filter => filter.selected);
-    }
+  export default defineComponent({
+    name: 'FiltersList',
+    xModule: facetsXModule.name,
+    props: {
+      /**
+       * The list of filters to be rendered as slots.
+       *
+       * @public
+       */
+      filters: Array as PropType<Filter[]>,
+
+      /**
+       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
+       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.
+       *
+       * @public
+       */
+      parentId: {
+        type: String as PropType<Filter['id']>,
+        required: false
+      },
+
+      /**
+       * Animation component that will be used to animate the base filters.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      }
+    },
+    setup(props) {
+      useRegisterXModule(facetsXModule);
+
+      const renderedFilters = useFiltersInjection(props);
+
+      /**
+       * It handles if the filters should be rendered.
+       *
+       * @returns True if there are filters.
+       *
+       * @public
+       */
+      const hasFiltersToRender = computed(() => {
+        return renderedFilters?.value.length > 0;
+      });
+
+      /**
+       * Checks if at least one filter is selected.
+       *
+       * @returns True if at least one filter is selected. False otherwise.
+       * @internal
+       */
+      const hasSelectedFilters = computed(() => {
+        return !!renderedFilters?.value.some(filter => filter.selected);
+      });
+
+      /**
+       * Dynamic CSS classes for the root element of this component.
+       *
+       * @returns An object containing the dynamic CSS classes and a boolean indicating if they should
+       * be added or not.
+       */
+      const cssClasses = computed((): VueCSSClasses => {
+        return {
+          'x-filters--has-selected-filters': hasSelectedFilters.value
+        };
+      });
 
-    /**
-     * Dynamic CSS classes for the root element of this component.
-     *
-     * @returns An object containing the dynamic CSS classes and a boolean indicating if they should
-     * be added or not.
-     */
-    protected get cssClasses(): VueCSSClasses {
       return {
-        'x-filters--has-selected-filters': this.hasSelectedFilters
+        hasFiltersToRender,
+        cssClasses,
+        renderedFilters
       };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
index 011f8b8eb5..7bccb66310 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
@@ -14,7 +14,7 @@
         type="search"
         class="x-filters-search__input x-input"
         data-test="filters-search-input"
-        :aria-label="filtersSearchInputMessage"
+        :aria-label="'search into the filter values'"
       />
     </slot>
     <!--
@@ -27,90 +27,121 @@
 
 <script lang="ts">
   import { Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import { xComponentMixin, XProvide } from '../../../../components';
+  import { computed, defineComponent, PropType, provide, ref, watch } from 'vue';
   import { debounce } from '../../../../utils/debounce';
   import { normalizeString } from '../../../../utils/normalize';
   import { DebouncedFunction, VueCSSClasses } from '../../../../utils/types';
   import { facetsXModule } from '../../x-module';
-  import FiltersInjectionMixin from './filters-injection.mixin';
+  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * Renders the filters sifted with the input query.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class FiltersSearch extends mixins(FiltersInjectionMixin) {
-    /** The debounce time for applying the filter sifting. */
-    @Prop({ default: 200 })
-    protected debounceInMs!: number;
-
-    protected query = '';
-    protected setQueryDebounced!: DebouncedFunction<[string]>;
-
-    protected filtersSearchInputMessage = 'search into the filter values';
-
-    /**
-     * Set the debounce function for setting the query debounced.
-     *
-     * @internal
-     */
-    @Watch('debounceInMs', { immediate: true })
-    updateSetQueryDebounced(): void {
-      this.setQueryDebounced = debounce(query => {
-        this.query = query;
-      }, this.debounceInMs);
-    }
+  export default defineComponent({
+    name: 'FiltersSearch',
+    xModule: facetsXModule.name,
+    props: {
+      /**
+       * The list of filters to be rendered as slots.
+       *
+       * @public
+       */
+      filters: Array as PropType<Filter[]>,
+
+      /**
+       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
+       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.
+       *
+       * @public
+       */
+      parentId: {
+        type: String as PropType<Filter['id']>,
+        required: false
+      },
+
+      /** The debounce time for applying the filter sifting. */
+      debounceInMs: {
+        type: Number,
+        default: 200
+      }
+    },
+    setup(props) {
+      useRegisterXModule(facetsXModule);
+      const renderedFilters = useFiltersInjection(props);
+
+      let query = ref('');
+      let setQueryDebounced: DebouncedFunction<[string]>;
+
+      const debounceInMs = computed(() => props.debounceInMs);
+
+      /**
+       * Set the debounce function for setting the query debounced.
+       *
+       * @internal
+       */
+      const updateSetQueryDebounced = () => {
+        setQueryDebounced = debounce(queryDebounced => {
+          query.value = queryDebounced;
+        }, props.debounceInMs);
+      };
+      watch(debounceInMs, updateSetQueryDebounced, { immediate: true });
+
+      /**
+       * Sift the array of filters which matches with the query.
+       *
+       * @returns Array of sifted filters.
+       * @internal
+       */
+      const siftedFilters = computed((): Filter[] => {
+        const normalizedQuery = normalizeString(query.value);
+        return renderedFilters.value.filter(
+          filter =>
+            isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery)
+        );
+      });
+      provide('filters', siftedFilters);
+
+      /**
+       * Adds the dynamic css classes to the component.
+       *
+       * @returns The class to be added to the component.
+       * @internal
+       */
+      const cssClasses = computed((): VueCSSClasses => {
+        return { 'x-filters-search--is-sifted': !!query.value };
+      });
+
+      /**
+       * Set the query through the debounced function.
+       *
+       * @param query - The query to sift filters.
+       * @internal
+       */
+      const setQuery = (query: string): void => {
+        setQueryDebounced(query);
+      };
 
-    /**
-     * Sift the array of filters which matches with the query.
-     *
-     * @returns Array of sifted filters.
-     * @internal
-     */
-    @XProvide('filters')
-    public get siftedFilters(): Filter[] {
-      const normalizedQuery = normalizeString(this.query);
-      return this.renderedFilters.filter(
-        filter => isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery)
-      );
-    }
+      /**
+       * Clear the query.
+       *
+       * @internal
+       */
+      const clearQuery = (): void => {
+        query.value = '';
+      };
 
-    /**
-     * Adds the dynamic css classes to the component.
-     *
-     * @returns The class to be added to the component.
-     * @internal
-     */
-    protected get cssClasses(): VueCSSClasses {
       return {
-        'x-filters-search--is-sifted': !!this.query
+        clearQuery,
+        setQuery,
+        cssClasses,
+        siftedFilters,
+        query
       };
     }
-
-    /**
-     * Set the query through the debounced function.
-     *
-     * @param query - The query to sift filters.
-     * @internal
-     */
-    protected setQuery(query: string): void {
-      this.setQueryDebounced(query);
-    }
-
-    /**
-     * Clear the query.
-     *
-     * @internal
-     */
-    protected clearQuery(): void {
-      this.query = '';
-    }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
index 6c83301b8e..e4111595c6 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
@@ -46,13 +46,11 @@
 
 <script lang="ts">
   import { Filter } from '@empathyco/x-types';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { xComponentMixin, XProvide } from '../../../../components';
+  import { computed, defineComponent, PropType, provide, ref } from 'vue';
   import { VueCSSClasses } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
-  import { dynamicPropsMixin } from '../../../../components/dynamic-props.mixin';
-  import FiltersInjectionMixin from './filters-injection.mixin';
+  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * Component that slices a list of filters and returns them using the default scoped slot,
@@ -61,76 +59,112 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule), dynamicPropsMixin(['buttonClass'])]
-  })
-  export default class SlicedFilters extends mixins(FiltersInjectionMixin) {
-    /**
-     * The maximum number of filters to show.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected max!: number;
-
-    /** For showing the remaining filters. */
-    public showMoreFilters = true;
-
-    /**
-     * Show the buttons template when length filters is greater than property max.
-     *
-     * @returns Boolean if length filters is greater than property max.
-     * @internal
-     */
-    protected get showButton(): boolean {
-      return this.renderedFilters.length > this.max;
-    }
+  export default defineComponent({
+    name: 'SlicedFilters',
+    xModule: facetsXModule.name,
+    props: {
+      /**
+       * The list of filters to be rendered as slots.
+       *
+       * @public
+       */
+      filters: Array as PropType<Filter[]>,
 
-    /**
-     * Sliced the array of filters depends on click button show more.
-     *
-     * @returns Array of sliced filters or all filters.
-     * @internal
-     */
-    @XProvide('filters')
-    public get slicedFilters(): Filter[] {
-      return this.showMoreFilters ? this.renderedFilters.slice(0, this.max) : this.renderedFilters;
-    }
+      /**
+       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
+       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.
+       *
+       * @public
+       */
+      parentId: {
+        type: String as PropType<Filter['id']>,
+        required: false
+      },
 
-    /**
-     * The difference between length filters and max to show.
-     *
-     * @returns Number of remaining filters to show.
-     * @internal
-     */
-    protected get difference(): number {
-      return this.renderedFilters.length - this.max;
-    }
+      /**
+       * The maximum number of filters to show.
+       *
+       * @public
+       */
+      max: {
+        type: Number,
+        required: true
+      },
 
-    /**
-     * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.
-     *
-     * @param event - The click event.
-     *
-     * @internal
-     */
-    protected toggleShowMoreFilters(event: MouseEvent): void {
-      this.showMoreFilters = !this.showMoreFilters;
-      this.$emit(this.showMoreFilters ? 'click:show-less' : 'click:show-more', event);
-    }
+      buttonClass: String
+    },
+    emits: ['click:show-less', 'click:show-more'],
+    setup(props, { emit }) {
+      useRegisterXModule(facetsXModule);
+
+      /** For showing the remaining filters. */
+      let showMoreFilters = ref(true);
+
+      const renderedFilters = useFiltersInjection(props);
+
+      /**
+       * Show the buttons template when length filters is greater than property max.
+       *
+       * @returns Boolean if length filters is greater than property max.
+       * @internal
+       */
+      const showButton = computed(() => renderedFilters.value.length > props.max);
+
+      /**
+       * Sliced the array of filters depends on click button show more.
+       *
+       * @returns Array of sliced filters or all filters.
+       * @internal
+       */
+      const slicedFilters = computed((): Filter[] => {
+        return showMoreFilters.value
+          ? renderedFilters.value.slice(0, props.max)
+          : renderedFilters.value;
+      });
+      provide('filters', slicedFilters);
+
+      /**
+       * The difference between length filters and max to show.
+       *
+       * @returns Number of remaining filters to show.
+       * @internal
+       */
+      const difference = computed(() => renderedFilters.value.length - props.max);
+
+      /**
+       * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.
+       *
+       * @param event - The click event.
+       *
+       * @internal
+       */
+      const toggleShowMoreFilters = (event: MouseEvent): void => {
+        showMoreFilters.value = !showMoreFilters.value;
+        emit(showMoreFilters.value ? 'click:show-less' : 'click:show-more', event);
+      };
+
+      /**
+       * Adds the dynamic css classes to the component.
+       *
+       * @returns The classes to be added to the component.
+       * @internal
+       */
+      const cssClasses = computed((): VueCSSClasses => {
+        return {
+          'x-sliced-filters--is-sliced': showButton.value
+        };
+      });
 
-    /**
-     * Adds the dynamic css classes to the component.
-     *
-     * @returns The classes to be added to the component.
-     * @internal
-     */
-    protected get cssClasses(): VueCSSClasses {
       return {
-        'x-sliced-filters--is-sliced': this.showButton
+        cssClasses,
+        toggleShowMoreFilters,
+        showButton,
+        difference,
+        slicedFilters,
+        showMoreFilters
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
index 9736638b4f..9886f9f769 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
@@ -1,43 +1,62 @@
 <script lang="ts">
   import { BooleanFilter, Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { mixins } from 'vue-class-component';
-  import { Component } from 'vue-property-decorator';
-  import { CreateElement, VNode } from 'vue';
-  import { xComponentMixin, XProvide } from '../../../../components';
+  import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { isArrayEmpty } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
-  import FiltersInjectionMixin from './filters-injection.mixin';
+  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * Component that sorts a list of filters and returns them using the default scoped slot.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class SortedFilters extends mixins(FiltersInjectionMixin) {
-    /**
-     * An array of filters with the selected filters at the beginning of the list.
-     *
-     * @returns Array of filters.
-     * @internal
-     */
-    @XProvide('filters')
-    public get sortedFilters(): Filter[] {
-      if (!isArrayEmpty(this.renderedFilters) && isBooleanFilter(this.renderedFilters[0])) {
-        return ([...this.renderedFilters] as BooleanFilter[]).sort(({ selected }) => {
-          return selected ? -1 : 1;
-        });
+  export default defineComponent({
+    name: 'SortedFilters',
+    xModule: facetsXModule.name,
+    props: {
+      /**
+       * The list of filters to be rendered as slots.
+       *
+       * @public
+       */
+      filters: Array as PropType<Filter[]>,
+
+      /**
+       * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
+       * to make the `renderedFilters` to return only the filters of each level of the hierarchy.
+       *
+       * @public
+       */
+      parentId: {
+        type: String as PropType<Filter['id']>,
+        required: false
       }
-
-      return this.renderedFilters;
-    }
-
-    render(h: CreateElement): VNode {
-      return this.$scopedSlots.default?.({ filters: this.sortedFilters })?.[0] ?? h();
+    },
+    setup(props, { slots }) {
+      useRegisterXModule(facetsXModule);
+      const renderedFilters = useFiltersInjection(props);
+
+      /**
+       * An array of filters with the selected filters at the beginning of the list.
+       *
+       * @returns Array of filters.
+       * @internal
+       */
+      const sortedFilters = computed((): Filter[] => {
+        if (!isArrayEmpty(renderedFilters.value) && isBooleanFilter(renderedFilters.value[0])) {
+          return ([...renderedFilters.value] as BooleanFilter[]).sort(({ selected }) => {
+            return selected ? -1 : 1;
+          });
+        }
+
+        return renderedFilters.value;
+      });
+      provide('filters', sortedFilters);
+
+      return () => (slots.default ? slots.default({ filters: sortedFilters.value }) : h());
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-injection-mixin.spec.ts b/packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts
similarity index 83%
rename from packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-injection-mixin.spec.ts
rename to packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts
index bed0463913..b92e0464e6 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-injection-mixin.spec.ts
+++ b/packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts
@@ -1,29 +1,42 @@
+import Vue, { ComponentOptions, defineComponent, PropType, provide, ref } from 'vue';
 import { Filter } from '@empathyco/x-types';
 import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
 import {
   createHierarchicalFilter,
   createSimpleFilter
-} from '../../../../../__stubs__/filters-stubs.factory';
-import { XProvide } from '../../../../../components/decorators/injection.decorators';
-import FiltersInjectionMixin from '../filters-injection.mixin';
-
-@Component({
+} from '../../../../__stubs__/filters-stubs.factory';
+import { useFiltersInjection } from '../use-filters-injection';
+
+const Provider = defineComponent({
+  name: 'Provider',
+  props: {
+    injectedData: {
+      type: Array as PropType<Filter[]>
+    }
+  },
+  setup(props) {
+    const filters = ref(props.injectedData);
+    provide('filters', filters);
+  },
   template: `
     <div>
       <slot />
     </div>
   `
-})
-class Provider extends Vue {
-  @Prop()
-  @XProvide('filters')
-  public injectedData!: any;
-}
+});
 
 const Filters: ComponentOptions<Vue> = {
-  mixins: [FiltersInjectionMixin],
+  props: {
+    filters: Array as PropType<Filter[]>,
+    parentId: {
+      type: String as PropType<Filter['id']>,
+      required: false
+    }
+  },
+  setup(props) {
+    const renderedFilters = useFiltersInjection(props);
+    return { renderedFilters };
+  },
   template: `
     <div>
     <li v-for="filter of renderedFilters" :key="filter.id">{{ filter.id }}</li>
@@ -31,8 +44,8 @@ const Filters: ComponentOptions<Vue> = {
   `
 };
 
-describe('test filters injection mixin', () => {
-  function renderFiltersMixin({
+describe('test filters injection composable', () => {
+  function renderFiltersComposable({
     propFilters,
     injectedFilters,
     parentId
@@ -76,7 +89,7 @@ describe('test filters injection mixin', () => {
     const whiteFilter = createSimpleFilter('color', 'white');
     const blackFilter = createSimpleFilter('color', 'black');
     const blueFilter = createSimpleFilter('color', 'blue');
-    const { setPropFilters, getRenderedFilterIds } = renderFiltersMixin({
+    const { setPropFilters, getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [whiteFilter, blackFilter]
     });
     let renderedIds = getRenderedFilterIds();
@@ -96,7 +109,7 @@ describe('test filters injection mixin', () => {
     const whiteFilter = createSimpleFilter('color', 'white');
     const blackFilter = createSimpleFilter('color', 'black');
     const blueFilter = createSimpleFilter('color', 'blue');
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       injectedFilters: [whiteFilter, blackFilter, blueFilter]
     });
     const renderedIds = getRenderedFilterIds();
@@ -110,7 +123,7 @@ describe('test filters injection mixin', () => {
     const whiteFilter = createSimpleFilter('color', 'white');
     const blackFilter = createSimpleFilter('color', 'black');
     const blueFilter = createSimpleFilter('color', 'blue');
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [whiteFilter, blackFilter],
       injectedFilters: [blueFilter]
     });
@@ -137,7 +150,7 @@ describe('test filters injection mixin', () => {
     categoryShirts.parentId = categoryJeans.parentId = categoryMen.id;
     const categoryWomen = createHierarchicalFilter('category', 'women', false);
 
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [categoryShirts, categoryJeans, categoryMen, categoryWomen]
     });
     const renderedIds = getRenderedFilterIds();
@@ -164,7 +177,7 @@ describe('test filters injection mixin', () => {
     categoryShirts.parentId = categoryJeans.parentId = categoryMen.id;
     const categoryWomen = createHierarchicalFilter('category', 'women', false);
 
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [categoryShirts, categoryJeans, categoryMen, categoryWomen],
       parentId: categoryMen.id
     });
diff --git a/packages/x-components/src/x-modules/facets/composables/index.ts b/packages/x-components/src/x-modules/facets/composables/index.ts
index 72b390d4cf..a4e9215039 100644
--- a/packages/x-components/src/x-modules/facets/composables/index.ts
+++ b/packages/x-components/src/x-modules/facets/composables/index.ts
@@ -1 +1,2 @@
 export * from './use-facets';
+export * from './use-filters-injection';
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts b/packages/x-components/src/x-modules/facets/composables/use-filters-injection.ts
similarity index 55%
rename from packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts
rename to packages/x-components/src/x-modules/facets/composables/use-filters-injection.ts
index 4276f2f20c..1c3b539912 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts
+++ b/packages/x-components/src/x-modules/facets/composables/use-filters-injection.ts
@@ -1,52 +1,30 @@
 import { Filter, HierarchicalFilter, isHierarchicalFilter } from '@empathyco/x-types';
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
-import { XInject } from '../../../../components/decorators/injection.decorators';
-import { isArrayEmpty } from '../../../../utils/array';
+import { computed, inject, Ref } from 'vue';
+import { isArrayEmpty } from '../../../utils/array';
 
 /**
- * Mixin to share filters injection logic.
+ * Composable to share filters injection logic.
+ *
+ * @param props - Composable props.
+ * @returns An array of filters.
  *
  * @public
  */
-@Component
-export default class FiltersInjectionMixin extends Vue {
+export function useFiltersInjection(props: {
+  /** The list of filters to be rendered as slots. */
+  filters?: Filter[];
   /**
-   * The list of filters to be rendered as slots.
-   *
-   * @public
+    This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
+   to make the `renderedFilters` to return only the filters of each level of the hierarchy.
    */
-  @Prop()
-  protected filters!: Filter[];
-
+  parentId?: Filter['id'];
+}) {
   /**
-   * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
-   * to make the `renderedFilters` to return only the filters of each level of the hierarchy.
+   * The injected filters array.
    *
    * @public
    */
-  @Prop({ required: false })
-  protected parentId?: Filter['id'];
-
-  /** The injected filters array.
-   *
-   * @public
-   */
-  @XInject('filters')
-  public injectedFilters!: Filter[];
-
-  /**
-   * The prop or injected filters array, filtered by parentId if they are
-   * {@link @empathyco/x-types#HierarchicalFilter}.
-   *
-   * @returns An array of filters.
-   *
-   * @internal
-   */
-  protected get renderedFilters(): Filter[] {
-    return this.filterByParentId(this.propOrInjectedFilters);
-  }
+  const injectedFilters = inject<Ref<Filter[]> | undefined>('filters', undefined);
 
   /**
    * An array of filters formed by those that are passed through prop or injected.
@@ -55,15 +33,15 @@ export default class FiltersInjectionMixin extends Vue {
    *
    * @internal
    */
-  protected get propOrInjectedFilters(): Filter[] {
+  const propOrInjectedFilters = computed((): void | Filter[] => {
     return (
-      this.filters ??
-      this.injectedFilters ??
+      props.filters ??
+      injectedFilters?.value ??
       //TODO: add here logger
       //eslint-disable-next-line no-console
       console.warn('It is necessary to pass a prop or inject the list of filters')
     );
-  }
+  });
 
   /**
    * In the case that the filters are {@link @empathyco/x-types#HierarchicalFilter}, this method
@@ -76,13 +54,23 @@ export default class FiltersInjectionMixin extends Vue {
    * @returns The list of the filters filtered by parentId.
    * @internal
    */
-  protected filterByParentId(filters: Filter[]): Filter[] {
+  const filterByParentId = (filters: Filter[]): Filter[] => {
     if (!isArrayEmpty(filters) && isHierarchicalFilter(filters[0])) {
       return (filters as HierarchicalFilter[]).filter(
-        filter => filter.parentId === (this.parentId ?? null)
+        filter => filter.parentId === (props.parentId ?? null)
       );
     } else {
       return filters;
     }
-  }
+  };
+
+  /**
+   * The prop or injected filters array, filtered by parentId if they are
+   * {@link @empathyco/x-types#HierarchicalFilter}.
+   *
+   * @returns An array of filters.
+   *
+   * @internal
+   */
+  return computed<Filter[]>(() => filterByParentId(propOrInjectedFilters.value as Filter[]));
 }