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 76bde29292..612e423eb0 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
@@ -37,10 +37,12 @@
       </template>
     </Facets>
     <h2>SelectedFilters</h2>
-    <SelectedFilters :facetsIds="facetsIds" alwaysVisible>
-      <template #default="{ selectedFilters }">
-        Selected filters: {{ selectedFilters.length }}
-      </template>
+    <SelectedFilters
+      class="it-is-a-inheritance-class"
+      :facetsIds="facetsIds"
+      #default="{ selectedFilters }"
+    >
+      <span>Selected filters: {{ selectedFilters.length }}</span>
     </SelectedFilters>
     <h2>SelectedFiltersList</h2>
     <SelectedFiltersList :facetsIds="facetsIds" alwaysVisible>
diff --git a/packages/x-components/src/components/modals/base-id-modal-close.vue b/packages/x-components/src/components/modals/base-id-modal-close.vue
index 9850fce2f9..7b06609c19 100644
--- a/packages/x-components/src/components/modals/base-id-modal-close.vue
+++ b/packages/x-components/src/components/modals/base-id-modal-close.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { NoElement } from '../no-element';
-  import { use$x } from '../../composables/index';
+  import { use$x } from '../../composables/use-$x';
 
   /**
    * Component that allows to close a modal by emitting
diff --git a/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts b/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
index 423d964ab3..1cdfbe53da 100644
--- a/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
@@ -1,5 +1,6 @@
-import { mount, Wrapper, WrapperArray } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { Result } from '@empathyco/x-types';
+import { nextTick } from 'vue';
 import { createResultStub } from '../../../__stubs__/index';
 import { findTestDataById, getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import ResultVariantsProvider from '../result-variants-provider.vue';
@@ -10,14 +11,7 @@ const variants = [
   {
     name: 'red jacket',
     images: ['red-jacket-image'],
-    variants: [
-      {
-        name: 'red jacket XL'
-      },
-      {
-        name: 'red jacket L'
-      }
-    ]
+    variants: [{ name: 'red jacket XL' }, { name: 'red jacket L' }]
   },
   {
     name: 'blue jacket',
@@ -25,81 +19,58 @@ const variants = [
       {
         name: 'blue jacket L',
         variants: [
-          {
-            name: 'blue jacket L1'
-          },
-          {
-            name: 'blue jacket L2'
-          },
-          {
-            name: 'blue jacket L3'
-          }
+          { name: 'blue jacket L1' },
+          { name: 'blue jacket L2' },
+          { name: 'blue jacket L3' }
         ]
       },
       { name: 'blue jacket S' }
     ]
   }
 ];
+const result = createResultStub('jacket', { variants });
 
-const result = createResultStub('jacket', {
-  variants
-});
-
-const renderResultVariantsProvider = ({
+const render = ({
   template = '<ResultVariantSelector/>',
-  result,
-  autoSelectDepth
-}: ResultVariantsProviderOptions): ResultVariantsProviderApi => {
-  const [, localVue] = installNewXPlugin();
-  const eventsBusSpy = jest.spyOn(XPlugin.bus, 'emit');
-
-  const wrapper = mount(
-    {
-      template: `
-        <ResultVariantsProvider
-            :result="result"
-            :autoSelectDepth="autoSelectDepth"
-            #default="{ result: newResult }">
-          ${template}
-        </ResultVariantsProvider>`,
-      components: {
-        ResultVariantsProvider,
-        ResultVariantSelector
-      }
+  result = {},
+  autoSelectDepth = Number.POSITIVE_INFINITY
+} = {}) => {
+  installNewXPlugin();
+  const emitSpy = jest.spyOn(XPlugin.bus, 'emit');
+
+  const wrapper = mount({
+    template: `
+      <ResultVariantsProvider
+        :result="result"
+        :autoSelectDepth="autoSelectDepth"
+        #default="{ result: newResult }">
+        ${template}
+      </ResultVariantsProvider>`,
+    components: {
+      ResultVariantsProvider,
+      ResultVariantSelector
     },
-    {
-      localVue,
-      data() {
-        return {
-          result,
-          autoSelectDepth
-        };
-      },
-      scopedSlots: {
-        default: () => {
-          return template;
-        }
-      }
-    }
-  );
+    data: () => ({
+      result,
+      autoSelectDepth
+    })
+  });
 
   return {
     wrapper: wrapper.findComponent(ResultVariantsProvider),
-    findSelectorButtonByLevel: function (level: number): WrapperArray<Vue> {
-      return findTestDataById(wrapper, 'variants-list')
+    emitSpy,
+    findSelectorButtonByLevel: (level: number) =>
+      findTestDataById(wrapper, 'variants-list')
         .at(level)
-        .findAll(getDataTestSelector('variant-button'));
-    },
-    findSelectorItemByLevel: function (level: number): WrapperArray<Vue> {
-      return findTestDataById(wrapper, 'variants-list')
+        .findAll(getDataTestSelector('variant-button')),
+    findSelectorItemByLevel: (level: number) =>
+      findTestDataById(wrapper, 'variants-list')
         .at(level)
-        .findAll(getDataTestSelector('variant-item'));
-    },
-    setResult: function (result: Result): Promise<void> {
+        .findAll(getDataTestSelector('variant-item')),
+    setResult: (result: Result) => {
       (wrapper.vm as any).result = result;
-      return wrapper.vm.$nextTick();
-    },
-    eventsBusSpy
+      return nextTick();
+    }
   };
 };
 
@@ -110,15 +81,15 @@ describe('results with variants', () => {
 
   it('provider exposes the result in the default slot', () => {
     const template = `
-      <span data-test="result-name">{{newResult.name}}</span>
-    `;
+      <span data-test="result-name">{{ newResult.name }}</span>`;
     const result = createResultStub('tshirt');
-    const { wrapper } = renderResultVariantsProvider({ result, template });
-    expect(wrapper.find(getDataTestSelector('result-name')).text()).toBe('tshirt');
+    const { wrapper } = render({ result, template });
+
+    expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('tshirt');
   });
 
   it('merges the selected and parent variants data with the result', async () => {
-    const { wrapper, findSelectorButtonByLevel } = renderResultVariantsProvider({
+    const { wrapper, findSelectorButtonByLevel } = render({
       template: `
         <div>
           <ResultVariantSelector #variant-content="{variant}">
@@ -129,49 +100,47 @@ describe('results with variants', () => {
           </ResultVariantSelector>
           <span data-test="result-name">{{ newResult.name }}</span>
           <span data-test="result-image" v-if="newResult.images">{{ newResult.images[0] }}</span>
-        </div>
-      `,
+        </div>`,
       result,
       autoSelectDepth: 0
     });
 
     const firstLevelVariantButtons = findSelectorButtonByLevel(0);
 
-    expect(wrapper.find(getDataTestSelector('result-name')).text()).toBe('jacket');
-    expect(wrapper.find(getDataTestSelector('result-image')).text()).toBe('');
+    expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('jacket');
+    expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('');
 
     await firstLevelVariantButtons.at(0).trigger('click');
 
-    expect(wrapper.find(getDataTestSelector('result-name')).text()).toBe('red jacket');
-    expect(wrapper.find(getDataTestSelector('result-image')).text()).toBe('red-jacket-image');
+    expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket');
+    expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('red-jacket-image');
 
     const secondLevelVariantButtons = findSelectorButtonByLevel(1);
 
     await secondLevelVariantButtons.at(1).trigger('click');
 
-    expect(wrapper.find(getDataTestSelector('result-name')).text()).toBe('red jacket L');
-    expect(wrapper.find(getDataTestSelector('result-image')).text()).toBe('red-jacket-image');
+    expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket L');
+    expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('red-jacket-image');
 
     // It won't deselect the child variant if the parent is clicked.
 
     await firstLevelVariantButtons.at(0).trigger('click');
 
-    expect(wrapper.find(getDataTestSelector('result-name')).text()).toBe('red jacket L');
+    expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket L');
 
     await firstLevelVariantButtons.at(1).trigger('click');
 
-    expect(wrapper.find(getDataTestSelector('result-name')).text()).toBe('blue jacket');
-    expect(wrapper.find(getDataTestSelector('result-image')).text()).toBe('');
+    expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('blue jacket');
+    expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('');
   });
 
   it('keeps the original result unmodified', async () => {
-    const { wrapper } = renderResultVariantsProvider({
+    const { wrapper } = render({
       template: `
         <div>
           <ResultVariantSelector/>
           <span data-test="result-name">{{ newResult.name }}</span>
-        </div>
-      `,
+        </div>`,
       result,
       autoSelectDepth: 0
     });
@@ -179,12 +148,12 @@ describe('results with variants', () => {
     const button = wrapper.find(getDataTestSelector('variant-button'));
     await button.trigger('click');
 
-    expect(wrapper.find(getDataTestSelector('result-name')).text()).toBe('red jacket');
-    expect(result.name).toBe('jacket');
+    expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket');
+    expect(result.name).toEqual('jacket');
   });
 
   it('emits UserSelectedAResultVariant event when a variant is selected', async () => {
-    const { wrapper, eventsBusSpy } = renderResultVariantsProvider({
+    const { wrapper, emitSpy } = render({
       result,
       autoSelectDepth: 0
     });
@@ -193,26 +162,21 @@ describe('results with variants', () => {
 
     await button.trigger('click');
 
-    expect(eventsBusSpy).toHaveBeenCalledTimes(1);
-    expect(eventsBusSpy).toHaveBeenCalledWith(
+    expect(emitSpy).toHaveBeenCalledTimes(1);
+    expect(emitSpy).toHaveBeenCalledWith(
       'UserSelectedAResultVariant',
-      {
-        result,
-        variant: variants[0],
-        level: 0
-      },
+      { result, variant: variants[0], level: 0 },
       expect.anything()
     );
   });
 
   it('selects the first variant of all levels by default', () => {
-    const { findSelectorItemByLevel } = renderResultVariantsProvider({
+    const { findSelectorItemByLevel } = render({
       template: `
         <div>
           <ResultVariantSelector :level="0"/>
           <ResultVariantSelector :level="1"/>
-        </div>
-      `,
+        </div>`,
       result
     });
 
@@ -224,13 +188,12 @@ describe('results with variants', () => {
   });
 
   it('selects variants on init up to the level set in the autoSelectDepth prop', () => {
-    const { findSelectorItemByLevel } = renderResultVariantsProvider({
+    const { findSelectorItemByLevel } = render({
       template: `
         <div>
           <ResultVariantSelector :level="0"/>
           <ResultVariantSelector :level="1"/>
-        </div>
-      `,
+        </div>`,
       result,
       autoSelectDepth: 1
     });
@@ -243,7 +206,7 @@ describe('results with variants', () => {
   });
 
   it('wont select any variant by default if autoSelectDepth is 0', () => {
-    const { wrapper } = renderResultVariantsProvider({
+    const { wrapper } = render({
       result,
       autoSelectDepth: 0
     });
@@ -253,15 +216,14 @@ describe('results with variants', () => {
     expect(firstVariant.element.className).not.toContain('--is-selected');
   });
 
-  // eslint-disable-next-line max-len
   it('does not emit the UserSelectedAResultVariant event when the variants are selected on init', () => {
-    const { eventsBusSpy } = renderResultVariantsProvider({ result });
+    const { emitSpy } = render({ result });
 
-    expect(eventsBusSpy).not.toHaveBeenCalled();
+    expect(emitSpy).not.toHaveBeenCalled();
   });
 
   it('reset the selected variants if the result changes', async () => {
-    const { wrapper, setResult } = renderResultVariantsProvider({
+    const { wrapper, setResult } = render({
       result,
       autoSelectDepth: 0
     });
@@ -272,26 +234,23 @@ describe('results with variants', () => {
 
     expect(variantItem.element.className).toContain('--is-selected');
 
-    await setResult(
-      createResultStub('tshirt', {
-        variants
-      })
-    );
+    await setResult(createResultStub('tshirt', { variants }));
 
-    //Resets even if the same variants are passed.
+    // Resets even if the same variants are passed.
     expect(variantItem.element.className).not.toContain('--is-selected');
   });
 
   describe('result variant selector', () => {
     it('renders the whole variant by default', () => {
-      const { wrapper } = renderResultVariantsProvider({ result });
+      const { wrapper } = render({ result });
       const button = wrapper.find(getDataTestSelector('variant-button'));
+
       expect(JSON.parse(button.text())).toEqual(variants[0]);
     });
 
     it('add selected class when a variant is selected', async () => {
       const className = 'x-result-variant-selector__item--is-selected';
-      const { wrapper } = renderResultVariantsProvider({ result });
+      const { wrapper } = render({ result });
 
       const firstVariantButton = wrapper.find(getDataTestSelector('variant-button'));
       const variantWrappers = wrapper.findAll(getDataTestSelector('variant-item'));
@@ -299,9 +258,9 @@ describe('results with variants', () => {
       await firstVariantButton.trigger('click');
 
       expect(variantWrappers.at(0).element).toHaveClass(className);
-      variantWrappers.wrappers.slice(1).forEach(wrapper => {
-        expect(wrapper.element).not.toHaveClass(className);
-      });
+      variantWrappers.wrappers
+        .slice(1)
+        .forEach(wrapper => expect(wrapper.element).not.toHaveClass(className));
     });
 
     it('renders all the variants of each level', async () => {
@@ -318,10 +277,9 @@ describe('results with variants', () => {
           <ResultVariantSelector :level="2" #variant-content="{variant}">
             <span data-test="variant-name">{{variant.name}}</span>
           </ResultVariantSelector>
-        </div>
-      `;
+        </div>`;
 
-      const { findSelectorButtonByLevel } = renderResultVariantsProvider({
+      const { findSelectorButtonByLevel } = render({
         template,
         result
       });
@@ -329,45 +287,45 @@ describe('results with variants', () => {
       const firstLevelVariantButtons = findSelectorButtonByLevel(0);
 
       expect(firstLevelVariantButtons).toHaveLength(2);
-      expect(firstLevelVariantButtons.at(0).text()).toBe('red jacket');
-      expect(firstLevelVariantButtons.at(1).text()).toBe('blue jacket');
+      expect(firstLevelVariantButtons.at(0).text()).toEqual('red jacket');
+      expect(firstLevelVariantButtons.at(1).text()).toEqual('blue jacket');
 
       await firstLevelVariantButtons.at(1).trigger('click');
 
       const secondLevelVariantButtons = findSelectorButtonByLevel(1);
 
       expect(secondLevelVariantButtons).toHaveLength(2);
-      expect(secondLevelVariantButtons.at(0).text()).toBe('blue jacket L');
-      expect(secondLevelVariantButtons.at(1).text()).toBe('blue jacket S');
+      expect(secondLevelVariantButtons.at(0).text()).toEqual('blue jacket L');
+      expect(secondLevelVariantButtons.at(1).text()).toEqual('blue jacket S');
 
       await secondLevelVariantButtons.at(0).trigger('click');
 
       const thirdLevelVariantButtons = findSelectorButtonByLevel(2);
 
       expect(thirdLevelVariantButtons).toHaveLength(3);
-      expect(thirdLevelVariantButtons.at(0).text()).toBe('blue jacket L1');
-      expect(thirdLevelVariantButtons.at(1).text()).toBe('blue jacket L2');
-      expect(thirdLevelVariantButtons.at(1).text()).toBe('blue jacket L2');
+      expect(thirdLevelVariantButtons.at(0).text()).toEqual('blue jacket L1');
+      expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
+      expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
     });
 
     it('wont render if no result is injected', () => {
-      const { wrapper } = renderResultVariantsProvider({
+      const { wrapper } = render({
         result: {}
       });
 
-      expect(wrapper.find(getDataTestSelector('variants-list')).exists()).toBe(false);
+      expect(wrapper.find(getDataTestSelector('variants-list')).exists()).toBeFalsy();
     });
 
     it('wont render if the provided result does not have variants', () => {
-      const { wrapper } = renderResultVariantsProvider({
+      const { wrapper } = render({
         result: createResultStub('jacket')
       });
 
-      expect(wrapper.find(getDataTestSelector('variants-list')).exists()).toBe(false);
+      expect(wrapper.find(getDataTestSelector('variants-list')).exists()).toBeFalsy();
     });
 
     it('exposes variants, selectedVariant and selectVariant in the default slot', async () => {
-      const { wrapper } = renderResultVariantsProvider({
+      const { wrapper } = render({
         template: `
           <ResultVariantSelector #default="{variants, selectedVariant, selectVariant}" >
             <div>
@@ -383,8 +341,7 @@ describe('results with variants', () => {
                 {{variant.name}}
               </button>
             </div>
-          </ResultVariantSelector>
-        `,
+          </ResultVariantSelector>`,
         result
       });
 
@@ -392,8 +349,8 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      expect(variants.at(0).text()).toBe('red jacket');
-      expect(variants.at(1).text()).toBe('blue jacket');
+      expect(variants.at(0).text()).toEqual('red jacket');
+      expect(variants.at(1).text()).toEqual('blue jacket');
 
       await variants.at(0).trigger('click');
 
@@ -401,7 +358,7 @@ describe('results with variants', () => {
     });
 
     it('exposes variant, isSelected and selectVariant in the variant slot', async () => {
-      const { wrapper } = renderResultVariantsProvider({
+      const { wrapper } = render({
         template: `
           <ResultVariantSelector #variant="{variant, selectVariant, isSelected}">
             <button
@@ -410,8 +367,7 @@ describe('results with variants', () => {
                 :class="{'isSelected': isSelected}">
               {{variant.name}}
             </button>
-          </ResultVariantSelector>
-        `,
+          </ResultVariantSelector>`,
         result
       });
 
@@ -419,20 +375,19 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      expect(variants.at(0).text()).toBe('red jacket');
-      expect(variants.at(1).text()).toBe('blue jacket');
+      expect(variants.at(0).text()).toEqual('red jacket');
+      expect(variants.at(1).text()).toEqual('blue jacket');
 
       await variants.at(1).trigger('click');
       expect(variants.at(1).element).toHaveClass('isSelected');
     });
 
     it('exposes variant and isSelected in the variant-content slot', async () => {
-      const { wrapper } = renderResultVariantsProvider({
+      const { wrapper } = render({
         template: `
           <ResultVariantSelector #variant-content="{variant, isSelected}">
             {{variant.name}}<span v-if="isSelected"> SELECTED!</span>
-          </ResultVariantSelector>
-        `,
+          </ResultVariantSelector>`,
         result
       });
 
@@ -443,53 +398,7 @@ describe('results with variants', () => {
       await variants.at(0).trigger('click');
 
       expect(variants.at(0).text()).toContain('red jacket SELECTED!');
-      expect(variants.at(1).text()).toBe('blue jacket');
+      expect(variants.at(1).text()).toEqual('blue jacket');
     });
   });
 });
-
-/**
- * The options for the `renderResultVariantsProvider` function.
- */
-interface ResultVariantsProviderOptions {
-  /** The result containing the variants. */
-  result: Result | Record<string, never>;
-  /** The template to render inside the provider's default slot. */
-  template?: string;
-  /** Indicates the number of levels to auto select the first variants. */
-  autoSelectDepth?: number;
-}
-
-/**
- * Test API for the {@link ResultVariantsProvider} component.
- */
-interface ResultVariantsProviderApi {
-  /** The wrapper for {@link ResultVariantsProvider} component. */
-  wrapper: Wrapper<Vue>;
-  /**
-   * Util function to find the variant items of a level.
-   *
-   * @param level - The level of the variants.
-   * @returns The wrappers of the list items rendered for the given level.
-   */
-  findSelectorItemByLevel: (level: number) => WrapperArray<Vue>;
-  /**
-   * Util function to find the variant buttons of a level.
-   *
-   * @param level - The level of the variants.
-   * @returns The wrappers of the buttons rendered for the given level.
-   */
-  findSelectorButtonByLevel: (level: number) => WrapperArray<Vue>;
-
-  /**
-   * Sets the result passed to the provider as prop, replacing it.
-   *
-   * @param result - Result to set.
-   */
-  setResult: (result: Result) => Promise<void>;
-  /**
-   * A Jest spy set in the {@link bus} bus `emit` function,
-   * useful to test events emitted in the first lifecycle hooks of the component.
-   */
-  eventsBusSpy: jest.SpyInstance;
-}
diff --git a/packages/x-components/src/components/result/result-variants-provider.vue b/packages/x-components/src/components/result/result-variants-provider.vue
index 12814b4133..a3d705e685 100644
--- a/packages/x-components/src/components/result/result-variants-provider.vue
+++ b/packages/x-components/src/components/result/result-variants-provider.vue
@@ -1,15 +1,5 @@
 <script lang="ts">
-  import {
-    defineComponent,
-    ref,
-    computed,
-    watch,
-    provide,
-    Ref,
-    CreateElement,
-    VNode,
-    PropType
-  } from 'vue';
+  import { defineComponent, ref, computed, watch, provide, Ref, PropType, h } from 'vue';
   import { Result, ResultVariant } from '@empathyco/x-types';
   import {
     RESULT_WITH_VARIANTS_KEY,
@@ -31,11 +21,7 @@
   export default defineComponent({
     name: 'ResultVariantsProvider',
     props: {
-      /**
-       * The original result containing the variants.
-       *
-       * @public
-       */
+      /** The original result containing the variants. */
       result: {
         type: Object as PropType<Result>,
         required: true
@@ -52,13 +38,12 @@
         default: Number.POSITIVE_INFINITY
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       const xBus = useXBus();
 
       /**
-       * The original result containing the variants as a computed ref object to enable watching prop changes.
-       *
-       * @public
+       * The original result containing the variants as a computed ref object to enable watching
+       * prop changes.
        */
       const result = computed(() => props.result);
 
@@ -67,8 +52,6 @@
        * Each position of the array is a nest level in the variants' hierarchy, so,
        * the second position will contain a variant that is present inside the variant of the first
        * position, and so on.
-       *
-       * @public
        */
       const selectedVariants = ref<ResultVariant[]>([]);
 
@@ -79,33 +62,33 @@
        *
        * @param variant - The variant to set.
        * @param level - The nest level where the variant is placed inside the result.
-       * @public
        */
-      const selectResultVariant = (variant: ResultVariant, level = 0): void => {
+      function selectResultVariant(variant: ResultVariant, level = 0) {
         if (selectedVariants.value[level] === variant) {
           return;
         }
         selectedVariants.value.splice(level, Number.POSITIVE_INFINITY, variant);
         xBus.emit('UserSelectedAResultVariant', { variant, level, result: result.value });
-      };
+      }
 
       /**
        * Merges the original result with the selected variant.
        * The merge is done with all the selected variants of the array.
        *
        * @returns - The result with the selected variant merged.
-       * @public
        */
-      const resultToProvide = computed<Result>(() => {
+      const resultToProvide = computed(() => {
         if (!selectedVariants.value.length) {
           return result.value;
         }
+
         const mergedResult = selectedVariants.value.reduce<Result>((result, variant) => {
           return {
             ...result,
             ...variant
           };
         }, result.value);
+
         mergedResult.variants = result.value.variants;
         return mergedResult;
       });
@@ -115,32 +98,20 @@
        *
        * @param variant - Variant to add to the array.
        */
-      const selectFirstVariants = (variant?: ResultVariant): void => {
+      function selectFirstVariants(variant?: ResultVariant) {
         if (!!variant && selectedVariants.value.length <= props.autoSelectDepth - 1) {
           selectedVariants.value.push(variant);
           selectFirstVariants(variant.variants?.[0]);
         }
-      };
+      }
 
-      /**
-       * Provides the original result passed as a prop.
-       *
-       * @public
-       */
+      /** Provides the original result passed as a prop. */
       provide<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string, result);
 
-      /**
-       * The selected variants of the result.
-       *
-       * @public
-       */
+      /** The selected variants of the result. */
       provide<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string, selectedVariants);
 
-      /**
-       * The result variant key that will be selected.
-       *
-       * @public
-       */
+      /** The result variant key that will be selected. */
       provide(SELECT_RESULT_VARIANT_KEY as string, selectResultVariant);
 
       /**
@@ -157,27 +128,7 @@
         { immediate: true }
       );
 
-      return {
-        props,
-        selectedVariants,
-        selectResultVariant,
-        resultToProvide
-      };
-    },
-    /**
-     * Render function of the provider.
-     * It exposes the result with the selected variant merged.
-     *
-     * @param createElement - Vue createElement method.
-     * @returns - The VNode of the first element passed in the slot.
-     * @public
-     */
-    render(createElement: CreateElement): VNode {
-      return (
-        this.$scopedSlots.default?.({
-          result: this.resultToProvide
-        })?.[0] ?? createElement()
-      );
+      return () => slots.default?.({ result: resultToProvide.value })[0] ?? h();
     }
   });
 </script>
diff --git a/packages/x-components/src/views/home/display-result-provider.vue b/packages/x-components/src/views/home/display-result-provider.vue
index 127938dc12..4df6d9e39c 100644
--- a/packages/x-components/src/views/home/display-result-provider.vue
+++ b/packages/x-components/src/views/home/display-result-provider.vue
@@ -1,25 +1,13 @@
-<template>
-  <NoElement>
-    <slot />
-  </NoElement>
-</template>
-
 <script lang="ts">
-  import { defineComponent, PropType, provide } from 'vue';
+  import { defineComponent, h, PropType, provide } from 'vue';
   import { TaggingRequest } from '@empathyco/x-types';
-  import { NoElement } from '../../components/no-element';
 
   export default defineComponent({
-    components: {
-      NoElement
-    },
+    name: 'DisplayResultProvider',
     props: {
-      queryTagging: {
-        type: Object as PropType<TaggingRequest>,
-        required: false
-      }
+      queryTagging: Object as PropType<TaggingRequest>
     },
-    setup(props) {
+    setup(props, { slots }) {
       provide('resultClickExtraEvents', ['UserClickedADisplayResult']);
 
       provide('resultLinkMetadataPerEvent', {
@@ -27,6 +15,8 @@
           queryTagging: props.queryTagging
         }
       });
+
+      return () => slots.default?.()[0] ?? h();
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts
index 0f97794e65..07e2471fc0 100644
--- a/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts
+++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts
@@ -1,6 +1,5 @@
 import { Dictionary } from '@empathyco/x-utils';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components';
 import { XPlugin } from '../../../../plugins';
@@ -9,71 +8,54 @@ import { extraParamsXModule } from '../../x-module';
 import RenderlessExtraParam from '../renderless-extra-param.vue';
 import { resetXExtraParamStateWith } from './utils';
 
-describe('testing RenderlessExtraParam component', () => {
-  function renderRenderlessExtraParams({
-    template = `<RenderlessExtraParam :name="name" :defaultValue="defaultValue" />`,
-    defaultValue,
-    name = 'warehouse',
-    params
-  }: RenderlessExtraParamsOptions): RenderlessExtraParamsAPI {
-    const [, localVue] = installNewXPlugin({ initialXModules: [extraParamsXModule] });
-    const store = XPlugin.store;
-    resetXExtraParamStateWith(store, {
-      params: params ?? {}
-    });
+function render({
+  template = `<RenderlessExtraParam :name="name" />`,
+  name = 'warehouse',
+  params = {}
+} = {}) {
+  installNewXPlugin({ initialXModules: [extraParamsXModule] });
+  resetXExtraParamStateWith(XPlugin.store, { params });
 
-    const wrapper = mount(
-      {
-        template,
-        components: {
-          RenderlessExtraParam
-        },
-        props: ['defaultValue', 'name']
-      },
-      {
-        propsData: {
-          defaultValue,
-          name
-        },
-        localVue,
-        store
-      }
-    );
+  const wrapper = mount({
+    template,
+    components: {
+      RenderlessExtraParam
+    },
+    data: () => ({ name })
+  });
 
-    return {
-      wrapper: wrapper.findComponent(RenderlessExtraParam)
-    };
-  }
+  return {
+    wrapper: wrapper.findComponent(RenderlessExtraParam)
+  };
+}
 
+describe('testing RenderlessExtraParam component', () => {
   it('is an XComponent which has an XModule', () => {
-    const { wrapper } = renderRenderlessExtraParams({});
-    expect(isXComponent(wrapper.vm)).toEqual(true);
+    const { wrapper } = render({});
+
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('extraParams');
   });
 
-  // eslint-disable-next-line max-len
   it("doesn't emit ExtraParamsProvided event when the component receives a default value if it's in the store", () => {
     const extraParamsProvidedCallback = jest.fn();
-    const { wrapper } = renderRenderlessExtraParams({
-      defaultValue: 1234,
-      params: { warehouse: 1234 }
-    });
+    render({ params: { warehouse: 1234 } });
 
-    wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
+    XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(0);
   });
 
   it('emits UserChangedExtraParams event when the update method is called', () => {
     const userChangedExtraParamsCallback = jest.fn();
-    const { wrapper } = renderRenderlessExtraParams({
+    const { wrapper } = render({
       template: `
         <RenderlessExtraParam name="warehouse" #default="{ defaultValue, updateValue }">
           <button data-test="custom-slot" @click="updateValue(45678)">Update warehouse</button>
         </RenderlessExtraParam>`
     });
 
-    wrapper.vm.$x.on('UserChangedExtraParams', true).subscribe(userChangedExtraParamsCallback);
+    XPlugin.bus.on('UserChangedExtraParams', true).subscribe(userChangedExtraParamsCallback);
 
     expect(userChangedExtraParamsCallback).toHaveBeenCalledTimes(0);
 
@@ -89,19 +71,3 @@ describe('testing RenderlessExtraParam component', () => {
     expect(userChangedExtraParamsCallback).toHaveBeenCalledTimes(1);
   });
 });
-
-interface RenderlessExtraParamsOptions {
-  /** The extra param's default value. */
-  defaultValue?: unknown;
-  /** The extra param's name. */
-  name?: unknown;
-  /** A dictionary with the params to save in the store. */
-  params?: Dictionary<unknown>;
-  /** The template to render. */
-  template?: string;
-}
-
-interface RenderlessExtraParamsAPI {
-  /** The wrapper for the extra params component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
index c7258312d9..a680dff9e0 100644
--- a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
@@ -1,14 +1,8 @@
-<template>
-  <NoElement>
-    <slot v-bind="{ value, updateValue }"></slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
-  import { computed, defineComponent } from 'vue';
-  import { NoElement } from '../../../components/no-element';
+  import { computed, defineComponent, h } from 'vue';
   import { extraParamsXModule } from '../x-module';
-  import { useState, useXBus } from '../../../composables';
+  import { useState } from '../../../composables/use-state';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`
@@ -19,47 +13,31 @@
   export default defineComponent({
     name: 'RenderlessExtraParam',
     xModule: extraParamsXModule.name,
-    components: {
-      NoElement
-    },
     props: {
       name: {
         type: String,
         required: true
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       const xBus = useXBus();
-      /**
-       * A dictionary with the extra params in the store state.
-       *
-       * @public
-       */
+
+      /** A dictionary with the extra params in the store state. */
       const stateParams = useState('extraParams', ['params']).params;
 
-      /**
-       * It returns the value of the extra param from the store.
-       *
-       * @returns - The value from the store.
-       *
-       * @internal
-       */
-      const value = computed(() => {
-        return stateParams.value[props.name];
-      });
+      /** It returns the value of the extra param from the store. */
+      const value = computed(() => stateParams.value[props.name]);
 
       /**
        * It sets the new value to the store.
        *
        * @param newValue - The new value of the extra param.
-       *
-       * @internal
        */
       function updateValue(newValue: unknown) {
         xBus.emit('UserChangedExtraParams', { [props.name]: newValue });
       }
 
-      return { value, updateValue };
+      return () => slots.default?.({ value, updateValue })[0] ?? h();
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters.spec.ts
index f139501c8e..513234da1d 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/lists/__tests__/selected-filters.spec.ts
@@ -1,196 +1,169 @@
-import { Facet } from '@empathyco/x-types';
-import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
+import { Facet, Filter } from '@empathyco/x-types';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { createSimpleFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
 import { installNewXPlugin } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
+import { useStore } from '../../../../../composables/use-store';
 import { XPlugin } from '../../../../../plugins';
-import { RootXStoreState } from '../../../../../store';
 import { resetFacetsService } from '../../../__tests__/utils';
 import { DefaultFacetsService } from '../../../service/facets.service';
 import { facetsXModule } from '../../../x-module';
 import { resetXFacetsStateWith } from '../../__tests__/utils';
 import SelectedFilters from '../selected-filters.vue';
 
-/**
- * Renders the `SelectedFilters` component, exposing a basic API for testing.
- *
- * @param options - The options to render the component with.
- * @returns The API for testing the `SelectedFilters` component.
- */
-function renderSelectedFilters({
-  template = '<SelectedFilters />',
-  facetsIds = []
-}: RenderSelectedFiltersOptions = {}): RenderSelectedFiltersAPI {
+jest.mock('../../../../../composables/use-store');
+
+const facets: Record<Facet['id'], Facet> = {
+  gender: createSimpleFacetStub('gender', createFilter => [
+    createFilter('Men', false),
+    createFilter('Women', false)
+  ]),
+  brand: createSimpleFacetStub('brand', createFilter => [
+    createFilter('Audi', false),
+    createFilter('BMW', false)
+  ]),
+  color: createSimpleFacetStub('color', createFilter => [
+    createFilter('red', false),
+    createFilter('blue', false)
+  ])
+};
+
+function render({ template = '<SelectedFilters />', facetsIds = [] as string[] } = {}) {
   resetFacetsService();
 
-  const facets: Record<Facet['id'], Facet> = {
-    gender: createSimpleFacetStub('gender', createFilter => [
-      createFilter('Men', false),
-      createFilter('Women', false)
-    ]),
-    brand: createSimpleFacetStub('brand', createFilter => [
-      createFilter('Audi', false),
-      createFilter('BMW', false)
-    ]),
-    color: createSimpleFacetStub('color', createFilter => [
-      createFilter('red', false),
-      createFilter('blue', false)
-    ])
-  };
+  installNewXPlugin({ initialXModules: [facetsXModule] });
+  resetXFacetsStateWith(XPlugin.store, facets);
+  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-  const store = new Store<DeepPartial<RootXStoreState>>({});
-  installNewXPlugin({ store }, localVue);
-  XPlugin.registerXModule(facetsXModule);
-  resetXFacetsStateWith(store, facets);
-
-  const wrapper = mount(
-    {
-      components: {
-        SelectedFilters
-      },
-      template,
-      data() {
-        return {
-          facetsIds
-        };
-      }
-    },
-    {
-      localVue,
-      store,
-      propsData: {
-        facetsIds
-      }
-    }
-  );
+  const wrapper = mount({
+    components: { SelectedFilters },
+    template,
+    data: () => ({ facetsIds })
+  });
 
   const selectedFiltersWrapper = wrapper.findComponent(SelectedFilters);
 
   return {
     wrapper,
     selectedFiltersWrapper,
-    toggleFacetNthFilter(facetId, nth) {
-      const filter = store.getters['x/facets/facets'][facetId].filters[nth];
+    toggleFacetNthFilter: (facetId: string, nth: number) => {
+      const filter: Filter = XPlugin.store.getters['x/facets/facets'][facetId].filters[nth];
       DefaultFacetsService.instance.toggle(filter);
-      return localVue.nextTick();
+      return nextTick();
     }
   };
 }
 
 describe('testing SelectedFilters component', () => {
   it('is an x-component', () => {
-    const { selectedFiltersWrapper } = renderSelectedFilters();
-    expect(isXComponent(selectedFiltersWrapper.vm)).toEqual(true);
+    const { selectedFiltersWrapper } = render();
+
+    expect(isXComponent(selectedFiltersWrapper.vm)).toBeTruthy();
   });
 
   it('belongs to the `facets` x-module', () => {
-    const { selectedFiltersWrapper } = renderSelectedFilters();
+    const { selectedFiltersWrapper } = render();
+
     expect(getXComponentXModuleName(selectedFiltersWrapper.vm)).toEqual('facets');
   });
 
   it('renders "nth" by default', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = renderSelectedFilters({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
       template: '<SelectedFilters :alwaysVisible="true" />'
     });
-    expect(selectedFiltersWrapper.text()).toBe('0');
+
+    expect(selectedFiltersWrapper.text()).toEqual('0');
+
     await toggleFacetNthFilter('brand', 0);
-    expect(selectedFiltersWrapper.text()).toBe('1');
+    expect(selectedFiltersWrapper.text()).toEqual('1');
+
     await toggleFacetNthFilter('brand', 1);
-    expect(selectedFiltersWrapper.text()).toBe('2');
+    expect(selectedFiltersWrapper.text()).toEqual('2');
+
     await toggleFacetNthFilter('gender', 0);
-    expect(selectedFiltersWrapper.text()).toBe('3');
+    expect(selectedFiltersWrapper.text()).toEqual('3');
   });
 
   it('renders "nth selected" in its customized slot', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = renderSelectedFilters({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
       template: `
-        <SelectedFilters :alwaysVisible="true">
-          <template #default="{ selectedFilters }">
-            {{ selectedFilters.length }} selected
-          </template>
+        <SelectedFilters :alwaysVisible="true" #default="{ selectedFilters }">
+          {{ selectedFilters.length }} selected
         </SelectedFilters>`
     });
-    expect(selectedFiltersWrapper.text()).toBe('0 selected');
+
+    expect(selectedFiltersWrapper.text()).toEqual('0 selected');
+
     await toggleFacetNthFilter('brand', 0);
-    expect(selectedFiltersWrapper.text()).toBe('1 selected');
+    expect(selectedFiltersWrapper.text()).toEqual('1 selected');
+
     await toggleFacetNthFilter('brand', 1);
-    expect(selectedFiltersWrapper.text()).toBe('2 selected');
+    expect(selectedFiltersWrapper.text()).toEqual('2 selected');
+
     await toggleFacetNthFilter('gender', 0);
-    expect(selectedFiltersWrapper.text()).toBe('3 selected');
+    expect(selectedFiltersWrapper.text()).toEqual('3 selected');
   });
 
   it('renders "nth" by default of the facet ids provided', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = renderSelectedFilters({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
       template: '<SelectedFilters :facetsIds="facetsIds" :alwaysVisible="true" />',
       facetsIds: ['brand', 'gender']
     });
-    expect(selectedFiltersWrapper.text()).toBe('0');
+
+    expect(selectedFiltersWrapper.text()).toEqual('0');
+
     await toggleFacetNthFilter('brand', 0);
-    expect(selectedFiltersWrapper.text()).toBe('1');
+    expect(selectedFiltersWrapper.text()).toEqual('1');
+
     await toggleFacetNthFilter('brand', 1);
-    expect(selectedFiltersWrapper.text()).toBe('2');
+    expect(selectedFiltersWrapper.text()).toEqual('2');
+
     await toggleFacetNthFilter('gender', 0);
-    expect(selectedFiltersWrapper.text()).toBe('3');
+    expect(selectedFiltersWrapper.text()).toEqual('3');
+
     await toggleFacetNthFilter('color', 0);
-    expect(selectedFiltersWrapper.text()).toBe('3');
+    expect(selectedFiltersWrapper.text()).toEqual('3');
   });
 
   it('renders "nth selected" in its customized slot of the facet id provided', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = renderSelectedFilters({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
       template: `
-        <SelectedFilters :facetsIds="facetsIds" :alwaysVisible="true">
-          <template #default="{ selectedFilters }">
-            {{ selectedFilters.length }} selected
-          </template>
+        <SelectedFilters :facetsIds="facetsIds" :alwaysVisible="true" #default="{ selectedFilters }">
+          {{ selectedFilters.length }} selected
         </SelectedFilters>`,
       facetsIds: ['brand']
     });
 
-    expect(selectedFiltersWrapper.text()).toBe('0 selected');
+    expect(selectedFiltersWrapper.text()).toEqual('0 selected');
+
     await toggleFacetNthFilter('brand', 0);
-    expect(selectedFiltersWrapper.text()).toBe('1 selected');
+    expect(selectedFiltersWrapper.text()).toEqual('1 selected');
+
     await toggleFacetNthFilter('brand', 1);
-    expect(selectedFiltersWrapper.text()).toBe('2 selected');
+    expect(selectedFiltersWrapper.text()).toEqual('2 selected');
+
     await toggleFacetNthFilter('gender', 0);
-    expect(selectedFiltersWrapper.text()).toBe('2 selected');
+    expect(selectedFiltersWrapper.text()).toEqual('2 selected');
   });
 
   it('always renders the component if alwaysVisible is true without selected filters', async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = renderSelectedFilters({
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = render({
       template: '<SelectedFilters :alwaysVisible="true" />'
     });
 
-    expect(selectedFiltersWrapper.text()).toBe('0');
+    expect(selectedFiltersWrapper.text()).toEqual('0');
+
     await toggleFacetNthFilter('brand', 0);
-    expect(selectedFiltersWrapper.text()).toBe('1');
+    expect(selectedFiltersWrapper.text()).toEqual('1');
   });
 
   it("doesn't render the component if alwaysVisible is false and no selected filters", async () => {
-    const { selectedFiltersWrapper, toggleFacetNthFilter } = renderSelectedFilters();
+    const { selectedFiltersWrapper, toggleFacetNthFilter } = render();
+
+    expect(selectedFiltersWrapper.html()).toEqual('');
 
-    expect(selectedFiltersWrapper.html()).toBe('');
     await toggleFacetNthFilter('brand', 0);
-    expect(selectedFiltersWrapper.text()).toBe('1');
+    expect(selectedFiltersWrapper.text()).toEqual('1');
   });
 });
-
-interface RenderSelectedFiltersOptions {
-  /** The template to be rendered. */
-  template?: string;
-  /** Array of facets ids. */
-  facetsIds?: Array<Facet['id']>;
-}
-
-interface RenderSelectedFiltersAPI {
-  /** The `selectedFilters` wrapper component. */
-  selectedFiltersWrapper: Wrapper<Vue>;
-  /** Toggle nth filter of the facet provided. */
-  toggleFacetNthFilter: (facetId: string, nth: number) => Promise<void>;
-  /** The wrapper of the container element. */
-  wrapper: Wrapper<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 fbc832e5de..eba758f822 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
@@ -18,18 +18,12 @@
     name: 'ExcludeFiltersWithNoResults',
     xModule: facetsXModule.name,
     props: {
-      /**
-       * The list of filters to be rendered as slots.
-       *
-       * @public
-       */
+      /** The list of filters to be rendered as slots. */
       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']>
@@ -42,16 +36,15 @@
        * 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(
+      const filtersWithResults = computed(() =>
+        renderedFilters.value.filter(
           filter => !isBooleanFilter(filter) || filter.totalResults !== 0
-        );
-      });
+        )
+      );
       provide('filters', filtersWithResults);
 
-      return () => (slots.default ? slots.default({ filters: filtersWithResults.value }) : h());
+      return () => slots.default?.({ filters: filtersWithResults.value }) ?? h();
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue
index f98a2985bd..8fde465624 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/selected-filters.vue
@@ -1,13 +1,6 @@
-<template>
-  <NoElement v-if="isVisible" class="x-selected-filters">
-    <slot v-bind="{ selectedFilters }">{{ selectedFilters.length }}</slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
   import { Facet } from '@empathyco/x-types';
-  import { defineComponent, PropType } from 'vue';
-  import { NoElement } from '../../../../components/no-element';
+  import { defineComponent, h, PropType } from 'vue';
   import { useFacets } from '../../composables/use-facets';
   import { facetsXModule } from '../../x-module';
 
@@ -23,20 +16,20 @@
   export default defineComponent({
     name: 'SelectedFilters',
     xModule: facetsXModule.name,
-    components: { NoElement },
     props: {
       /** Array of facets ids used to get the selected filters for those facets. */
       facetsIds: Array as PropType<Array<Facet['id']>>,
       /** Flag to render the component even if there are no filters selected. */
       alwaysVisible: Boolean
     },
-    setup: function (props) {
+    setup: function (props, { slots }) {
       const { selectedFilters, isVisible } = useFacets(props);
 
-      return {
-        selectedFilters,
-        isVisible
-      };
+      return () =>
+        isVisible.value
+          ? slots.default?.({ selectedFilters: selectedFilters.value })[0] ??
+            h('span', `${selectedFilters.value.length}`)
+          : h();
     }
   });
 </script>
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 0b836602f0..b69b707569 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
@@ -52,7 +52,7 @@
       });
       provide('filters', sortedFilters);
 
-      return () => (slots.default ? slots.default({ filters: sortedFilters.value }) : h());
+      return () => slots.default?.({ filters: sortedFilters.value }) ?? h();
     }
   });
 </script>