From de0a28754d8fefe8c4db6aa7b7cb5d8407016be2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Antonio=20Caba=C3=B1eros?= <joseacabaneros@gmail.com>
Date: Wed, 24 Apr 2024 10:03:54 +0200
Subject: [PATCH] refactor(sort-mixin): get rid of SortMixin and refactor
 components which use it (#1448)

BREAKING CHANGE:
base-dropdown component will no longer emit the `change` event, use `update:modelValue` instead.
base-dropdown prop for the selected item was renamed from `value` to `modelValue`.
---
 packages/_vue3-migration-test/package.json    |   4 +
 .../src/components/index.ts                   |   1 +
 .../src/components/test-base-dropdown.vue     |  22 +
 packages/_vue3-migration-test/src/main.ts     |   4 +-
 packages/_vue3-migration-test/src/router.ts   |   7 +-
 packages/_vue3-migration-test/vite.config.ts  |   1 +
 packages/x-components/.eslintrc.js            |   9 +-
 packages/x-components/jest.setup.ts           |   3 +
 .../__tests__/base-dropdown.spec.ts           | 234 ++----
 .../components/animations/animate-width.vue   |   3 +-
 .../src/components/animations/fade.vue        |   3 +-
 .../src/components/base-dropdown.vue          | 666 ++++++++----------
 .../base-column-picker-dropdown.vue           |  28 +-
 .../x-components/src/components/no-element.ts |   2 +-
 packages/x-components/src/views/home/Home.vue |   6 +-
 .../components/renderless-extra-param.vue     |   2 +-
 .../components/__tests__/my-history.spec.ts   |   4 +-
 .../__tests__/sort-dropdown.spec.ts           | 162 ++---
 .../components/__tests__/sort-list.spec.ts    | 121 +---
 .../__tests__/sort-picker-list.spec.ts        | 135 +---
 .../src/x-modules/search/components/index.ts  |   1 -
 .../search/components/sort-dropdown.vue       |  86 ++-
 .../x-modules/search/components/sort-list.vue | 100 +--
 .../search/components/sort-picker-list.vue    | 101 +--
 .../x-modules/search/components/sort.mixin.ts |  45 --
 .../src/x-modules/search/store/module.ts      |   1 -
 pnpm-lock.yaml                                |  57 ++
 27 files changed, 749 insertions(+), 1059 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/test-base-dropdown.vue
 delete mode 100644 packages/x-components/src/x-modules/search/components/sort.mixin.ts

diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 289615e91..7d6eac011 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -9,7 +9,11 @@
     "build": "vue-tsc && vite build"
   },
   "dependencies": {
+    "@empathyco/x-bus": "^1.0.3-alpha.1",
+    "@empathyco/x-types": "^10.1.0-alpha.2",
+    "@empathyco/x-utils": "^1.0.3-alpha.1",
     "@vue/compat": "^3.4.22",
+    "@vueuse/core": "~10.7.1",
     "vue": "^3.4.22",
     "vue-router": "^4.3.0"
   },
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 9616d4a90..de7210842 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -1 +1,2 @@
 export * from './animations';
+export { default as TestBaseDropdown } from './test-base-dropdown.vue';
diff --git a/packages/_vue3-migration-test/src/components/test-base-dropdown.vue b/packages/_vue3-migration-test/src/components/test-base-dropdown.vue
new file mode 100644
index 000000000..f2f7d444e
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/test-base-dropdown.vue
@@ -0,0 +1,22 @@
+<template>
+  <BaseDropdown v-model="value" :items="items">
+    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
+    <template #item="{ item, isSelected, isHighlighted }">
+      <span v-if="isHighlighted">🟢</span>
+      <span v-if="isSelected">✅</span>
+      <span>{{ item }}</span>
+    </template>
+  </BaseDropdown>
+</template>
+
+<script setup lang="ts">
+  import { Identifiable } from '@empathyco/x-types';
+  import { ref } from 'vue';
+  import BaseDropdown from '../../../x-components/src/components/base-dropdown.vue';
+
+  type BaseDropdownItem = string | number | Identifiable;
+
+  const items: Array<BaseDropdownItem> = ['a', 2, { id: '3' }];
+
+  const value = ref<BaseDropdownItem>(items[0]);
+</script>
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 194db49bf..c8fc07e36 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -6,7 +6,9 @@ import router from './router';
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
 if (VUE_COMPAT_MODE === 2) {
   configureCompat({
-    INSTANCE_LISTENERS: 'suppress-warning'
+    INSTANCE_LISTENERS: 'suppress-warning',
+    RENDER_FUNCTION: false,
+    COMPONENT_V_MODEL: false
   });
 }
 
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 9ec37cfd1..8d6109ff4 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import { TestAnimateWidth, TestFade } from './';
+import { TestAnimateWidth, TestBaseDropdown, TestFade } from './';
 
 const routes = [
   {
@@ -11,6 +11,11 @@ const routes = [
     path: '/fade',
     name: 'Fade',
     component: TestFade
+  },
+  {
+    path: '/base-dropdown',
+    name: 'BaseDropdown',
+    component: TestBaseDropdown
   }
 ];
 
diff --git a/packages/_vue3-migration-test/vite.config.ts b/packages/_vue3-migration-test/vite.config.ts
index 298c907ab..f369e93a2 100644
--- a/packages/_vue3-migration-test/vite.config.ts
+++ b/packages/_vue3-migration-test/vite.config.ts
@@ -27,6 +27,7 @@ export default defineConfig(({ mode }) => {
     ],
     resolve: {
       alias: {
+        '@vueuse/core': resolve(__dirname, 'node_modules/@vueuse/core'),
         vue: resolve(__dirname, 'node_modules/@vue/compat')
       }
     },
diff --git a/packages/x-components/.eslintrc.js b/packages/x-components/.eslintrc.js
index 068101346..75aafd665 100644
--- a/packages/x-components/.eslintrc.js
+++ b/packages/x-components/.eslintrc.js
@@ -8,7 +8,8 @@ module.exports = {
   rules: {
     'no-dupe-class-members': 'off',
     '@typescript-eslint/no-unused-vars-experimental': 'off',
-    'vue/require-default-prop': 'off'
+    'vue/require-default-prop': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off'
   },
   overrides: [
     {
@@ -29,6 +30,12 @@ module.exports = {
       rules: {
         'max-len': 'off'
       }
+    },
+    {
+      files: ['*.spec.ts'],
+      rules: {
+        'max-len': 'off'
+      }
     }
   ]
 };
diff --git a/packages/x-components/jest.setup.ts b/packages/x-components/jest.setup.ts
index 8ffa92215..ba707431c 100644
--- a/packages/x-components/jest.setup.ts
+++ b/packages/x-components/jest.setup.ts
@@ -5,3 +5,6 @@ window.ResizeObserver = jest.fn().mockImplementation(() => ({
   unobserve: jest.fn(),
   disconnect: jest.fn()
 }));
+
+// Disable console warnings to reduce noise overwriting entirely modules in the store
+console.warn = () => {};
diff --git a/packages/x-components/src/components/__tests__/base-dropdown.spec.ts b/packages/x-components/src/components/__tests__/base-dropdown.spec.ts
index be6da7f06..4c59fd563 100644
--- a/packages/x-components/src/components/__tests__/base-dropdown.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-dropdown.spec.ts
@@ -1,93 +1,54 @@
-import { Identifiable } from '@empathyco/x-types';
-import { mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import BaseDropdown from '../base-dropdown.vue';
 import { getDataTestSelector } from '../../__tests__/utils';
 
+type Key = 'End' | 'Home' | 'ArrowUp' | 'ArrowDown' | 'Enter' | 'Space' | 'Esc';
+
 function renderDropdown({
   template = `
-    <BaseDropdown v-model="value" :items="items">
-        <template #item="{ item, isSelected, isHighlighted }">
-            <span>
-              {{ item && item.id ? item.id : item }}
-            </span>
-        </template>
+    <BaseDropdown :modelValue="value" :items="items" @update:modelValue="val => value = val">
+      <template #item="{ item, isSelected, isHighlighted }">
+        <span>
+          {{ item && item.id ? item.id : item }}
+        </span>
+      </template>
     </BaseDropdown>`,
   items = ['one', 'two', 'three'],
   initialValue = items[0]
-}: RenderDropdownOptions = {}): RenderDropdownAPI {
+}: Partial<{ template?: string; items?: any[]; initialValue?: any }> = {}) {
   const wrapper = mount(
     {
-      props: ['items'],
-      components: {
-        BaseDropdown
-      },
       template,
-      data() {
-        return {
-          value: initialValue
-        };
-      }
+      components: { BaseDropdown },
+      props: ['items'],
+      data: () => ({ value: initialValue })
     },
     {
-      propsData: {
-        items
-      }
+      propsData: { items }
     }
   );
 
-  const dropdownWrapper = wrapper.findComponent(BaseDropdown);
-
-  function getDropdownToggle(): Wrapper<Vue> {
-    return dropdownWrapper.find(getDataTestSelector('dropdown-toggle'));
-  }
-
-  function getListItems(): WrapperArray<Vue> {
-    return dropdownWrapper.findAll(getDataTestSelector('dropdown-item'));
-  }
+  const dropdown = wrapper.findComponent(BaseDropdown);
 
-  function getHighlightedItem(): Wrapper<Vue> {
-    return dropdownWrapper.find('.x-dropdown__item--is-highlighted');
-  }
+  const getDropdownToggle = () => dropdown.find(getDataTestSelector('dropdown-toggle'));
+  const getListItems = () => dropdown.findAll(getDataTestSelector('dropdown-item'));
+  const getHighlightedItem = () => dropdown.find('.x-dropdown__item--is-highlighted');
+  const getSelectedItem = () => dropdown.find('.x-dropdown__item--is-selected');
 
-  function getSelectedItem(): Wrapper<Vue> {
-    return dropdownWrapper.find('.x-dropdown__item--is-selected');
-  }
-
-  function clickBody(): Promise<void> {
+  function clickBody() {
     document.dispatchEvent(new Event('mousedown'));
-    return dropdownWrapper.vm.$nextTick();
+    return nextTick();
   }
 
-  function clickToggleButton(): Promise<void> {
-    getDropdownToggle().trigger('click');
-    return dropdownWrapper.vm.$nextTick();
-  }
+  const clickToggleButton = () => getDropdownToggle().trigger('click');
+  const clickNthItem = (nth: number) => getListItems().at(nth).trigger('click');
+  const pressKeyFromToggle = (key: Key) => getDropdownToggle().trigger(`keydown`, { key });
+  const pressKeyFromFocusedItem = (key: Key) => getHighlightedItem().trigger(`keydown`, { key });
 
-  function clickNthItem(nth: number): Promise<void> {
-    getListItems().at(nth).trigger('click');
-    return dropdownWrapper.vm.$nextTick();
-  }
-
-  function pressKeyFromToggle(key: Key): Promise<void> {
-    const keyDownEventInit: KeyboardEventInit = {
-      key
-    };
-    getDropdownToggle().trigger(`keydown`, keyDownEventInit);
-    return dropdownWrapper.vm.$nextTick();
-  }
-
-  function pressKeyFromFocusedItem(key: Key): Promise<void> {
-    const keyDownEventInit: KeyboardEventInit = {
-      key
-    };
-    getHighlightedItem().trigger(`keydown`, keyDownEventInit);
-    return dropdownWrapper.vm.$nextTick();
-  }
-
-  async function search(search: string): Promise<void> {
+  async function search(search: string) {
     jest.useFakeTimers();
-    await chainTypeChars(search, dropdownWrapper.vm.$nextTick());
+    await chainTypeChars(search, nextTick());
     jest.runAllTimers();
     jest.useRealTimers();
   }
@@ -100,7 +61,7 @@ function renderDropdown({
           pendingChars,
           previousCharPromise.then(() =>
             /* Vue test utils has a strange issue where the `home` and `end` event handlers
-             * are always executed every time a `keydown` event is emmitted. That's why the only
+             * are always executed every time a `keydown` event is emitted. That's why the only
              * way to make it work is to pass the real key value in the options.
              * The `keydown.<key>` syntax of the `trigger` method can't be used. */
             getHighlightedItem().trigger('keydown', { key: charToType })
@@ -109,8 +70,13 @@ function renderDropdown({
       : previousCharPromise;
   }
 
+  function isListVisible() {
+    const element = dropdown.find(getDataTestSelector('dropdown-list')).element;
+    return element.style.display !== 'none';
+  }
+
   return {
-    wrapper: dropdownWrapper,
+    wrapper: dropdown,
     getDropdownToggle,
     getListItems,
     getHighlightedItem,
@@ -120,20 +86,21 @@ function renderDropdown({
     clickNthItem,
     pressKeyFromToggle,
     pressKeyFromFocusedItem,
-    search
-  };
+    search,
+    isListVisible
+  } as const;
 }
 
 describe('testing Dropdown component', () => {
   it('does not render the list if it is collapsed', async () => {
-    const { getDropdownToggle, getListItems, clickToggleButton } = renderDropdown();
+    const { getDropdownToggle, clickToggleButton, isListVisible } = renderDropdown();
 
-    expect(getDropdownToggle().exists()).toBe(true);
-    expect(getListItems().isVisible()).toBe(false);
+    expect(getDropdownToggle().exists()).toBeTruthy();
+    expect(isListVisible()).toBeFalsy();
 
     await clickToggleButton();
 
-    expect(getListItems().isVisible()).toBe(true);
+    expect(isListVisible()).toBeTruthy();
   });
 
   it('renders the provided items', async () => {
@@ -162,7 +129,7 @@ describe('testing Dropdown component', () => {
       getHighlightedItem
     } = renderDropdown({
       template: `
-        <BaseDropdown v-model="value" :items="items">
+        <BaseDropdown :modelValue="value" :items="items" @update:modelValue="val => value = val">
             <template #toggle="{ item }">
               {{ item || 'select something'}}
             </template>
@@ -183,7 +150,7 @@ describe('testing Dropdown component', () => {
   it('allows to customize the toggle button', async () => {
     const { clickToggleButton, getDropdownToggle } = renderDropdown({
       template: `
-        <BaseDropdown v-model="value" :items="items">
+        <BaseDropdown :modelValue="value" :items="items" @update:modelValue="val => value = val">
             <template #toggle="{ item, isOpen }">
               {{ item }} {{ isOpen ? '🔼' : '🔽' }}
             </template>
@@ -198,10 +165,9 @@ describe('testing Dropdown component', () => {
   });
 
   describe('opening the dropdown', () => {
-    const items = ['stonks', 'go', 'brrr'];
+    const items = ['stones', 'go', 'bum'];
     const selectedIndex = 1;
 
-    // eslint-disable-next-line max-len
     it('opens and focuses the selected element when the button has focus and the arrow DOWN key is pressed', async () => {
       const { pressKeyFromToggle, getHighlightedItem, getListItems } = renderDropdown({
         items,
@@ -214,7 +180,6 @@ describe('testing Dropdown component', () => {
       expect(getHighlightedItem().text()).toBe(selectedElement.text());
     });
 
-    // eslint-disable-next-line max-len
     it('opens and focuses the selected element when the button has focus and arrow UP key is pressed', async () => {
       const { pressKeyFromToggle, getHighlightedItem, getListItems } = renderDropdown({
         items,
@@ -230,29 +195,29 @@ describe('testing Dropdown component', () => {
 
   describe('closing the dropdown', () => {
     it('closes the dropdown when it is open and the toggle button is clicked', async () => {
-      const { clickToggleButton, getListItems } = renderDropdown();
+      const { clickToggleButton, isListVisible } = renderDropdown();
 
       await clickToggleButton();
-      expect(getListItems().isVisible()).toBe(true);
+      expect(isListVisible()).toBeTruthy();
 
       await clickToggleButton();
-      expect(getListItems().isVisible()).toBe(false);
+      expect(isListVisible()).toBeFalsy();
     });
 
     it('closes the dropdown when losing focus', async () => {
-      const { clickToggleButton, getListItems, clickBody } = renderDropdown();
+      const { clickToggleButton, getListItems, clickBody, isListVisible } = renderDropdown();
 
       await clickToggleButton();
       expect(getListItems()).not.toHaveLength(0);
 
       await clickBody();
-      expect(getListItems().isVisible()).toBe(false);
+      expect(isListVisible()).toBeFalsy();
     });
 
     it('closes the dropdown when selecting an element', async () => {
       const items = [0, 1, 2, 3, 4];
       const value = items[0];
-      const { clickNthItem, clickToggleButton, getDropdownToggle, getListItems } = renderDropdown({
+      const { clickNthItem, clickToggleButton, getDropdownToggle, isListVisible } = renderDropdown({
         items,
         initialValue: value
       });
@@ -261,17 +226,16 @@ describe('testing Dropdown component', () => {
       await clickNthItem(2);
 
       expect(getDropdownToggle().text()).toEqual('2');
-      expect(getListItems().isVisible()).toBe(false);
+      expect(isListVisible()).toBeFalsy();
     });
 
-    // eslint-disable-next-line max-len
     it('closes the dropdown without modifying the selected item when the escape key is pressed', async () => {
       const {
         getHighlightedItem,
         clickToggleButton,
         pressKeyFromFocusedItem,
-        getListItems,
-        getSelectedItem
+        getSelectedItem,
+        isListVisible
       } = renderDropdown({
         items: ['spain', 'uk', 'poland'],
         initialValue: 'spain'
@@ -286,7 +250,7 @@ describe('testing Dropdown component', () => {
       expect(getSelectedItem().text()).toBe('spain');
 
       await pressKeyFromFocusedItem('Esc');
-      expect(getListItems().isVisible()).toBe(false);
+      expect(isListVisible()).toBeFalsy();
 
       await clickToggleButton();
       expect(getSelectedItem().text()).toBe('spain');
@@ -319,7 +283,6 @@ describe('testing Dropdown component', () => {
       expect(getHighlightedItem().text()).toBe(items[2]);
     });
 
-    // eslint-disable-next-line max-len
     it('focuses the first element when the home button is pressed and the last when the end key is pressed', async () => {
       const { pressKeyFromFocusedItem, clickToggleButton, getListItems, getHighlightedItem } =
         renderDropdown();
@@ -334,7 +297,6 @@ describe('testing Dropdown component', () => {
       expect(getHighlightedItem().text()).toBe(listItems.at(0).text());
     });
 
-    // eslint-disable-next-line max-len
     it('focuses the first element starting to search from the focused one which its text starts with the typed characters', async () => {
       const { search, getHighlightedItem, clickToggleButton } = renderDropdown({
         items: ['chocolate', 'milk', 'milk chocolate', 'chocolate milk'],
@@ -352,7 +314,6 @@ describe('testing Dropdown component', () => {
       expect(getHighlightedItem().text()).toBe('milk chocolate');
     });
 
-    // eslint-disable-next-line max-len
     it('focuses the first element when typing if no element is found starting with the typed chars', async () => {
       const { search, getHighlightedItem, clickToggleButton } = renderDropdown({
         items: ['beer', 'steak'],
@@ -366,88 +327,3 @@ describe('testing Dropdown component', () => {
     });
   });
 });
-
-type Key = 'End' | 'Home' | 'ArrowUp' | 'ArrowDown' | 'Enter' | 'Space' | 'Esc';
-
-interface RenderDropdownOptions {
-  /** The template to test. */
-  template?: string;
-  /** Items to be rendered by the {@link BaseDropdown}. */
-  items?: Array<number | string | Identifiable>;
-  /** The initial selected value. */
-  initialValue?: null | number | string | Identifiable;
-}
-
-interface RenderDropdownAPI {
-  /** Dropdown test wrapper. */
-  wrapper: Wrapper<Vue>;
-  /**
-   * Retrieves the button wrapper to open the dropdown.
-   *
-   * @returns The Wrapper to open the dropdown.
-   */
-  getDropdownToggle: () => Wrapper<Vue>;
-  /**
-   * Retrieves wrappers of the list item buttons.
-   *
-   * @returns The wrappers of the list item buttons.
-   */
-  getListItems: () => WrapperArray<Vue>;
-  /**
-   * Retrieves the highlighted item wrapper.
-   * This can only be used if the dropdown is open.
-   *
-   * @returns The highlighted item.
-   */
-  getHighlightedItem: () => Wrapper<Vue>;
-  /**
-   * Retrieves the selected item wrapper.
-   * This can only be used if the dropdown is open.
-   *
-   * @returns The selected item.
-   */
-  getSelectedItem: () => Wrapper<Vue>;
-  /**
-   * Simulates a click event in the body.
-   *
-   * @returns A promise that resolves after updating the view.
-   */
-  clickBody: () => Promise<void>;
-  /**
-   * Simulates a click event in the button that opens the dropdown.
-   *
-   * @returns A promise that resolves after updating the view.
-   */
-  clickToggleButton: () => Promise<void>;
-  /**
-   * Simulates a click event in element with the index passed.
-   * To use this, the dropdown must be opened first.
-   *
-   * @returns A promise that resolves after updating the view.
-   */
-  clickNthItem: (item: number) => Promise<void>;
-  /**
-   * Simulates a key press that happens when the dropdown open button is focused.
-   *
-   * @param key - The key to press.
-   * @returns A promise that resolves after updating the view.
-   */
-  pressKeyFromToggle: (key: Key) => Promise<void>;
-  /**
-   * Simulates a key press that happens when the an element from the list is focused.
-   * To use this, the dropdown must be opened first.
-   *
-   * @param key - The key to press.
-   * @returns A promise that resolves after updating the view.
-   */
-  pressKeyFromFocusedItem: (key: Key) => Promise<void>;
-  /**
-   * Searches inside the items for the characters. It emits an event for each character that the
-   * passed string has.
-   * To use this, the dropdown must be opened first.
-   *
-   * @param itemText - The text to find inside the items.
-   * @returns A promise that resolves after updating the view.
-   */
-  search: (itemText: string) => Promise<void>;
-}
diff --git a/packages/x-components/src/components/animations/animate-width.vue b/packages/x-components/src/components/animations/animate-width.vue
index f2f9f6f52..bafc52fc0 100644
--- a/packages/x-components/src/components/animations/animate-width.vue
+++ b/packages/x-components/src/components/animations/animate-width.vue
@@ -1,5 +1,6 @@
 <template>
-  <transition v-on="$listeners" name="x-animate-width-" v-bind="$attrs">
+  <!-- eslint-disable-next-line vue/attributes-order -->
+  <transition v-bind="$attrs" v-on="$listeners" name="x-animate-width-">
     <!-- @slot (Required) Transition content -->
     <slot />
   </transition>
diff --git a/packages/x-components/src/components/animations/fade.vue b/packages/x-components/src/components/animations/fade.vue
index 8a22c6d12..5c7439400 100644
--- a/packages/x-components/src/components/animations/fade.vue
+++ b/packages/x-components/src/components/animations/fade.vue
@@ -1,5 +1,6 @@
 <template>
-  <transition v-on="$listeners" name="x-fade-" v-bind="$attrs" :appear="appear">
+  <!-- eslint-disable-next-line vue/attributes-order -->
+  <transition v-bind="$attrs" v-on="$listeners" name="x-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
diff --git a/packages/x-components/src/components/base-dropdown.vue b/packages/x-components/src/components/base-dropdown.vue
index ffe18c903..0d233a846 100644
--- a/packages/x-components/src/components/base-dropdown.vue
+++ b/packages/x-components/src/components/base-dropdown.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="rootRef"
     @keydown="updateSearchBuffer"
     @keydown.down.prevent="highlightNextItem"
     @keydown.up.prevent="highlightPreviousItem"
@@ -7,7 +8,7 @@
     class="x-dropdown"
   >
     <button
-      ref="toggleButton"
+      ref="toggleButtonRef"
       @click="toggle"
       @keydown.up.down.prevent.stop="open"
       class="x-dropdown__toggle"
@@ -25,10 +26,10 @@
        @binding {string|number|Identifiable} item - The item data to render.
        @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.
      -->
-      <slot v-if="$scopedSlots.toggle" :isOpen="isOpen" :item="value" name="toggle">
-        {{ value }}
+      <slot v-if="hasToggleSlot" :isOpen="isOpen" :item="modelValue" name="toggle">
+        {{ modelValue }}
       </slot>
-      <slot v-else :item="value" name="item">{{ value }}</slot>
+      <slot v-else :item="modelValue" name="item">{{ modelValue }}</slot>
     </button>
 
     <component :is="animation">
@@ -39,14 +40,15 @@
         @keydown.home="highlightFirstItem"
         :id="listId"
         class="x-dropdown__items-list"
+        data-test="dropdown-list"
         role="listbox"
         tabindex="-1"
       >
         <li v-for="(item, index) in items" :key="item.id || item" class="x-dropdown__list-item">
           <button
-            ref="itemButtons"
+            :ref="el => (itemsButtonRefs[index] = el)"
             @click="emitSelectedItemChanged(item)"
-            :aria-selected="(item === value).toString()"
+            :aria-selected="(item === modelValue).toString()"
             :class="itemsCSSClasses[index]"
             class="x-dropdown__item"
             data-test="dropdown-item"
@@ -61,7 +63,7 @@
              -->
             <slot
               :isHighlighted="index === highlightedItemIndex"
-              :isSelected="item === value"
+              :isSelected="item === modelValue"
               :item="item"
               name="item"
             >
@@ -76,13 +78,19 @@
 
 <script lang="ts">
   import { Identifiable } from '@empathyco/x-types';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import Vue from 'vue';
+  import Vue, {
+    computed,
+    defineComponent,
+    nextTick,
+    onBeforeUnmount,
+    PropType,
+    ref,
+    watch
+  } from 'vue';
   import { getTargetElement } from '../utils/html';
   import { normalizeString } from '../utils/normalize';
   import { isInRange } from '../utils/number';
-  import { debounce } from '../utils/debounce';
-  import { VueCSSClasses } from '../utils/types';
+  import { debounce as debounceFunction } from '../utils/debounce';
   import { NoElement } from './no-element';
 
   type DropdownItem = string | number | Identifiable;
@@ -91,382 +99,312 @@
   /**
    * Dropdown component that mimics a Select element behavior, but with the option
    * to customize the toggle button and each item contents.
-   *
-   * @public
    */
-  @Component({
-    components: {
-      NoElement
+  export default defineComponent({
+    name: 'BaseDropdown',
+    components: { NoElement },
+    props: {
+      /** List of items to display.*/
+      items: {
+        type: Array as PropType<DropdownItem[]>,
+        required: true
+      },
+      /** The selected item. */
+      modelValue: {
+        type: null as unknown as PropType<DropdownItem | null>,
+        validator: (v: any) =>
+          typeof v === 'string' || typeof v === 'number' || typeof v === 'object' || v === null,
+        required: true
+      },
+      /** Description of what the dropdown is used for. */
+      ariaLabel: String,
+      /**
+       * Animation component to use for expanding the dropdown. This is a single element animation,
+       * so only `<transition>` components are allowed.
+       */
+      animation: {
+        type: Object as PropType<string | typeof Vue>,
+        default: () => NoElement
+      },
+      /** Time to wait without receiving any keystroke before resetting the items search query. */
+      searchTimeoutMs: {
+        type: Number,
+        default: 1000
+      }
     },
-    model: {
-      event: 'change'
-    }
-  })
-  export default class BaseDropdown extends Vue {
-    /**
-     * List of items to display.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public items!: DropdownItem[];
-
-    /**
-     * Description of what the dropdown is used for.
-     *
-     * @public
-     */
-    @Prop()
-    public ariaLabel?: string;
-
-    /**
-     * The selected item.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public value!: DropdownItem | null;
-
-    /**
-     * Animation component to use for expanding the dropdown. This is a single element animation,
-     * so only `<transition>` components are allowed.
-     *
-     * @public
-     */
-    @Prop({ default: 'NoElement' })
-    public animation!: typeof Vue | string;
-
-    /**
-     * Time to wait without receiving any keystroke before resetting the items search query.
-     *
-     * @public
-     */
-    @Prop({ default: 1000 })
-    public searchTimeoutMs!: number;
-
-    public $refs!: {
-      /** Array containing the dropdown list buttons HTMLElements. */
-      itemButtons: HTMLButtonElement[];
+    emits: ['update:modelValue'],
+    setup(props, { emit, slots }) {
+      const rootRef = ref<HTMLElement>();
       /** The button that opens and closes the list of options. */
-      toggleButton: HTMLButtonElement;
-    };
-
-    /**
-     * Property to track whether the dropdown is expanded and displaying the full
-     * list of items, or closed.
-     *
-     * @internal
-     */
-    protected isOpen = false;
-
-    /**
-     * Index of the element that has the focus in the list. -1 means no element has focus.
-     *
-     * @internal
-     */
-    protected highlightedItemIndex = -1;
-
-    /**
-     * String to search for the first element that starts with it.
-     *
-     * @internal
-     */
-    protected searchBuffer = '';
-
-    /**
-     * Resets the search buffer after a certain time has passed.
-     *
-     * @internal
-     */
-    protected restartResetSearchTimeout!: () => void;
-
-    protected readonly listId = `x-dropdown-${dropdownCount++}`;
-    /**
-     * Dynamic CSS classes to add to the dropdown root element.
-     *
-     * @returns An object containing the CSS classes to add to the dropdown root element.
-     * @internal
-     */
-    protected get dropdownCSSClasses(): VueCSSClasses {
-      return {
-        'x-dropdown--is-open': this.isOpen
-      };
-    }
-
-    /**
-     * Dynamic CSS classes to add to each one of the items.
-     *
-     * @returns An object containing the CSS classes to add to each item.
-     * @internal
-     */
-    protected get itemsCSSClasses(): VueCSSClasses[] {
-      return this.items.map((item, index) => {
-        return {
-          'x-dropdown__item--is-selected': this.value === item,
-          'x-dropdown__item--is-highlighted': this.highlightedItemIndex === index
-        };
-      });
-    }
-
-    /**
-     * If the dropdown is destroyed before removing the document listeners, it ensures that they
-     * are removed too.
-     *
-     * @internal
-     */
-    protected beforeDestroy(): void {
-      this.removeDocumentCloseListeners();
-    }
-
-    /**
-     * Opens the dropdown.
-     *
-     * @internal
-     */
-    protected open(): void {
-      this.isOpen = true;
-    }
-
-    /**
-     * Closes the dropdown.
-     *
-     * @internal
-     */
-    protected close(): void {
-      this.isOpen = false;
-    }
+      const toggleButtonRef = ref<HTMLButtonElement>();
+      /** Array containing the dropdown list buttons HTMLElements. */
+      const itemsButtonRefs = ref<HTMLButtonElement[]>([]);
+
+      /** Property to check whether the dropdown is expanded or closed. */
+      const isOpen = ref(false);
+      /** Index of the element that has the focus in the list. -1 means no element has focus. */
+      const highlightedItemIndex = ref(-1);
+      /** String to search for the first element that starts with it. */
+      const searchBuffer = ref('');
+
+      /** Resets the search buffer after a certain time has passed. */
+      let restartResetSearchTimeout: () => void;
+      /* Unique ID to identify the dropdown. */
+      const listId = `x-dropdown-${dropdownCount++}`;
+
+      /**
+       * Dynamic CSS classes to add to the dropdown root element.
+       *
+       * @returns An object containing the CSS classes to add to the dropdown root element.
+       */
+      const dropdownCSSClasses = computed(() => ({ 'x-dropdown--is-open': isOpen }));
 
-    /**
-     * Closes the modal and focuses the toggle button.
-     *
-     * @internal
-     */
-    protected closeAndFocusToggleButton(): void {
-      this.close();
-      this.$refs.toggleButton.focus();
-    }
+      /**
+       * Dynamic CSS classes to add to each one of the items.
+       *
+       * @returns An object containing the CSS classes to add to each item.
+       */
+      const itemsCSSClasses = computed(() =>
+        props.items.map((item, index) => ({
+          'x-dropdown__item--is-selected': props.modelValue === item,
+          'x-dropdown__item--is-highlighted': highlightedItemIndex.value === index
+        }))
+      );
+
+      /* Opens the dropdown. */
+      const open = () => (isOpen.value = true);
+      /* Closes the dropdown. */
+      const close = () => (isOpen.value = false);
+      /* Toggles the dropdown. */
+      const toggle = () => (isOpen.value = !isOpen.value);
+
+      /**
+       * Closes the modal and focuses the toggle button.
+       */
+      function closeAndFocusToggleButton() {
+        close();
+        toggleButtonRef.value?.focus();
+      }
 
-    /**
-     * If the dropdown is opened it closes it. If it is closed it opens it.
-     *
-     * @internal
-     */
-    protected toggle(): void {
-      this.isOpen = !this.isOpen;
-    }
+      /**
+       * Emits the event that the selected item has changed.
+       *
+       * @param item - The new selected item.
+       */
+      function emitSelectedItemChanged(item: DropdownItem) {
+        emit('update:modelValue', item);
+        closeAndFocusToggleButton();
+      }
 
-    /**
-     * Emits the event that the selected item has changed.
-     *
-     * @param item - The new selected item.
-     * @internal
-     */
-    protected emitSelectedItemChanged(item: DropdownItem): void {
-      this.$emit('change', item);
-      this.closeAndFocusToggleButton();
-    }
+      /**
+       * Highlights the item after the one that is currently highlighted.
+       */
+      function highlightNextItem() {
+        open();
+        highlightedItemIndex.value = (highlightedItemIndex.value + 1) % props.items.length;
+      }
 
-    /**
-     * Highlights the item after the one that is currently highlighted.
-     *
-     * @internal
-     */
-    protected highlightNextItem(): void {
-      this.open();
-      this.highlightedItemIndex = (this.highlightedItemIndex + 1) % this.items.length;
-    }
+      /**
+       * Highlights the item before the one that is currently highlighted.
+       */
+      function highlightPreviousItem() {
+        const currentIndex = highlightedItemIndex.value;
+        open();
+        highlightedItemIndex.value = currentIndex > 0 ? currentIndex - 1 : props.items.length - 1;
+      }
 
-    /**
-     * Highlights the item before the one that is currently highlighted.
-     *
-     * @internal
-     */
-    protected highlightPreviousItem(): void {
-      this.open();
-      this.highlightedItemIndex =
-        this.highlightedItemIndex > 0 ? this.highlightedItemIndex - 1 : this.items.length - 1;
-    }
+      /**
+       * Highlights the first of the provided items.
+       */
+      function highlightFirstItem() {
+        highlightedItemIndex.value = 0;
+      }
 
-    /**
-     * Highlights the first of the provided items.
-     *
-     * @internal
-     */
-    protected highlightFirstItem(): void {
-      this.highlightedItemIndex = 0;
-    }
+      /**
+       * Highlights the last of the provided items.
+       */
+      function highlightLastItem() {
+        highlightedItemIndex.value = props.items.length - 1;
+      }
 
-    /**
-     * Highlights the last of the provided items.
-     *
-     * @internal
-     */
-    protected highlightLastItem(): void {
-      this.highlightedItemIndex = this.items.length - 1;
-    }
+      /**
+       * Updates the variable that is used to search in the filters.
+       *
+       * @param event - The event coming from the user typing.
+       */
+      function updateSearchBuffer(event: KeyboardEvent) {
+        if (/^\w$/.test(event.key)) {
+          const key = event.key;
+          searchBuffer.value += key;
+          restartResetSearchTimeout();
+        }
+      }
 
-    /**
-     * Updates the variable that is used to search in the filters.
-     *
-     * @param event - The event coming from the user typing.
-     * @internal
-     */
-    protected updateSearchBuffer(event: KeyboardEvent): void {
-      if (/^\w$/.test(event.key)) {
-        const key = event.key;
-        this.searchBuffer += key;
-        this.restartResetSearchTimeout();
+      /**
+       * Resets the search buffer.
+       */
+      function resetSearchBuffer() {
+        searchBuffer.value = '';
       }
-    }
 
-    /**
-     * Highlights the item that matches the search buffer. To do so it checks the list buttons
-     * text content. It highlights items folowing this priority:
-     * - If an element is already highlighted, it starts searching from that element.
-     * - If no element is found starting from the previously highlighted, it returns the first one.
-     * - If no element is found matching the search query it highlights the first element.
-     *
-     * @param search - The search string to find in the HTML.
-     * @internal
-     */
-    @Watch('searchBuffer')
-    protected highlightMatchingItem(search: string): void {
-      if (search) {
-        const normalizedSearch = normalizeString(search);
-        const matchingIndices = this.$refs.itemButtons.reduce<number[]>(
-          (matchingIndices, button, index) => {
-            const safeButtonWordCharacters = button.textContent!.replace(/[^\w]/g, '');
-            const normalizedButtonText = normalizeString(safeButtonWordCharacters);
-            if (normalizedButtonText.startsWith(normalizedSearch)) {
-              matchingIndices.push(index);
-            }
-            return matchingIndices;
-          },
-          []
-        );
-        this.highlightedItemIndex =
-          // First matching item starting to search from the current highlighted element
-          matchingIndices.find(index => index >= this.highlightedItemIndex) ??
-          // First matching item
-          matchingIndices[0] ??
-          // First item
-          0;
+      /**
+       * Closes the dropdown if the passed event has happened on an element out of the dropdown.
+       *
+       * @param event - The event to check if it has happened out of the dropdown component.
+       */
+      function closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent) {
+        if (!rootRef.value?.contains(getTargetElement(event))) {
+          close();
+        }
       }
-    }
 
-    /**
-     * Resets the search buffer.
-     *
-     * @internal
-     */
-    protected resetSearch(): void {
-      this.searchBuffer = '';
-    }
+      /**
+       * Adds listeners to the document element to detect if the focus has moved out from the
+       * dropdown.
+       */
+      function addDocumentCloseListeners() {
+        document.addEventListener('mousedown', closeIfEventIsOutOfDropdown);
+        document.addEventListener('touchstart', closeIfEventIsOutOfDropdown);
+        document.addEventListener('focusin', closeIfEventIsOutOfDropdown);
+      }
 
-    /**
-     * Updates the debounced function to reset the search.
-     *
-     * @param searchTimeoutMs - The new milliseconds that have to pass without typing before
-     * resetting the search.
-     * @internal
-     */
-    @Watch('searchTimeoutMs', { immediate: true })
-    protected updateSearchTimeout(searchTimeoutMs: number): void {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      this.restartResetSearchTimeout = debounce(this.resetSearch, searchTimeoutMs);
-    }
+      /**
+       * Removes the listeners of the document element to detect if the focus has moved out from the
+       * dropdown.
+       */
+      function removeDocumentCloseListeners() {
+        document.removeEventListener('mousedown', closeIfEventIsOutOfDropdown);
+        document.removeEventListener('touchstart', closeIfEventIsOutOfDropdown);
+        document.removeEventListener('focusin', closeIfEventIsOutOfDropdown);
+      }
 
-    /**
-     * Focuses the DOM element which matches the `highlightedItemIndex`.
-     *
-     * @param highlightedItemIndex - The index of the HTML element to focus.
-     * @internal
-     */
-    @Watch('highlightedItemIndex', { immediate: true })
-    protected focusHighlightedItem(highlightedItemIndex: number): void {
-      this.$nextTick(() => {
-        if (this.$refs.itemButtons && isInRange(highlightedItemIndex, [0, this.items.length - 1])) {
-          const newItem = this.$refs.itemButtons[this.highlightedItemIndex];
-          newItem.focus();
+      /**
+       * Highlights the item that matches the search buffer. To do so it checks the list buttons
+       * text content. It highlights items following this priority:
+       * - If an element is already highlighted, it starts searching from that element.
+       * - If no element is found starting from the previously highlighted, it returns the first one.
+       * - If no element is found matching the search query it highlights the first element.
+       *
+       * @param search - The search string to find in the HTML.
+       */
+      watch(searchBuffer, search => {
+        if (search) {
+          const normalizedSearch = normalizeString(search);
+          const matchingIndices = itemsButtonRefs?.value?.reduce<number[]>(
+            (matchingIndices, button, index) => {
+              const safeButtonWordCharacters = button.textContent!.replace(/[^\w]/g, '');
+              const normalizedButtonText = normalizeString(safeButtonWordCharacters);
+              if (normalizedButtonText.startsWith(normalizedSearch)) {
+                matchingIndices.push(index);
+              }
+              return matchingIndices;
+            },
+            []
+          );
+          highlightedItemIndex.value =
+            // First matching item starting to search from the current highlighted element
+            matchingIndices?.find(index => index >= highlightedItemIndex.value) ??
+            // First matching item
+            matchingIndices?.[0] ??
+            // First item
+            0;
         }
       });
-    }
-
-    /**
-     * When the dropdown is open it sets the focused element to the one that is selected.
-     *
-     * @param isOpen - True if the dropdown is open, false otherwise.
-     * @internal
-     */
-    @Watch('isOpen')
-    protected updateHighlightedItem(isOpen: boolean): void {
-      if (isOpen) {
-        this.highlightedItemIndex = this.value === null ? 0 : this.items.indexOf(this.value);
-      } else {
-        this.highlightedItemIndex = -1;
-      }
-    }
 
-    /**
-     * Adds and removes listeners to close the dropdown when it loses the focus.
-     *
-     * @param isOpen - True if the dropdown is open, false otherwise.
-     * @internal
-     */
-    @Watch('isOpen')
-    protected syncCloseListeners(isOpen: boolean): void {
-      /*
-       * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target
-       * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be
-       * used to detect whether or not the user has blurred the dropdown. The hack here is to use
-       * document listeners that have the side effect of losing the focus.
+      /**
+       * Updates the debounced function to reset the search.
+       *
+       * @param searchTimeoutMs - The new milliseconds that have to pass without typing before
+       * resetting the search.
        */
-      if (isOpen) {
-        this.addDocumentCloseListeners();
-      } else {
-        this.removeDocumentCloseListeners();
-      }
-    }
+      watch(
+        () => props.searchTimeoutMs,
+        searchTimeoutMs => {
+          restartResetSearchTimeout = debounceFunction(resetSearchBuffer, searchTimeoutMs);
+        },
+        { immediate: true }
+      );
+
+      /**
+       * Focuses the DOM element which matches the `highlightedItemIndex`.
+       *
+       * @param highlightedItemIndex - The index of the HTML element to focus.
+       */
+      watch(
+        highlightedItemIndex,
+        highlightedItemIndex => {
+          nextTick(() => {
+            if (itemsButtonRefs && isInRange(highlightedItemIndex, [0, props.items.length - 1])) {
+              const newItem = itemsButtonRefs?.value?.[highlightedItemIndex];
+              newItem?.focus();
+            }
+          });
+        },
+        { immediate: true }
+      );
+
+      /**
+       * When the dropdown is open it sets the focused element to the one that is selected.
+       *
+       * @param isOpen - True if the dropdown is open, false otherwise.
+       */
+      watch(isOpen, isOpen => {
+        highlightedItemIndex.value = isOpen
+          ? props.modelValue === null
+            ? 0
+            : props.items.indexOf(props.modelValue)
+          : -1;
+      });
 
-    /**
-     * Adds listeners to the document element to detect if the focus has moved out from the
-     * dropdown.
-     *
-     * @internal
-     */
-    protected addDocumentCloseListeners(): void {
-      /* eslint-disable @typescript-eslint/unbound-method */
-      document.addEventListener('mousedown', this.closeIfEventIsOutOfDropdown);
-      document.addEventListener('touchstart', this.closeIfEventIsOutOfDropdown);
-      document.addEventListener('focusin', this.closeIfEventIsOutOfDropdown);
-      /* eslint-enable @typescript-eslint/unbound-method */
-    }
+      /**
+       * Adds and removes listeners to close the dropdown when it loses the focus.
+       *
+       * @param isOpen - True if the dropdown is open, false otherwise.
+       */
+      watch(isOpen, isOpen => {
+        /*
+         * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target
+         * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be
+         * used to detect whether the user has blurred the dropdown. The hack here is to use
+         * document listeners that have the side effect of losing the focus.
+         */
+        if (isOpen) {
+          addDocumentCloseListeners();
+        } else {
+          removeDocumentCloseListeners();
+        }
+      });
 
-    /**
-     * Removes the listeners of the document element to detect if the focus has moved out from the
-     * dropdown.
-     *
-     * @internal
-     */
-    protected removeDocumentCloseListeners(): void {
-      /* eslint-disable @typescript-eslint/unbound-method */
-      document.removeEventListener('mousedown', this.closeIfEventIsOutOfDropdown);
-      document.removeEventListener('touchstart', this.closeIfEventIsOutOfDropdown);
-      document.removeEventListener('focusin', this.closeIfEventIsOutOfDropdown);
-      /* eslint-enable @typescript-eslint/unbound-method */
-    }
+      /**
+       * If the dropdown is destroyed before removing the document listeners, it ensures that they
+       * are removed too.
+       */
+      onBeforeUnmount(() => {
+        removeDocumentCloseListeners();
+      });
 
-    /**
-     * Closes the dropdown if the passed event has happened on an element out of the dropdown.
-     *
-     * @param event - The event to check if it has happen out of the dropdown component.
-     */
-    protected closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent): void {
-      if (!this.$el.contains(getTargetElement(event))) {
-        this.close();
-      }
+      return {
+        hasToggleSlot: !!slots.toggle,
+        closeAndFocusToggleButton,
+        dropdownCSSClasses,
+        emitSelectedItemChanged,
+        highlightFirstItem,
+        highlightLastItem,
+        highlightNextItem,
+        highlightPreviousItem,
+        highlightedItemIndex,
+        isOpen,
+        itemsButtonRefs,
+        itemsCSSClasses,
+        listId,
+        open,
+        rootRef,
+        toggle,
+        toggleButtonRef,
+        updateSearchBuffer
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
@@ -502,7 +440,7 @@ provided, the `item` slot will be used for that.
 
 ```vue
 <template>
-  <BaseDropdown :items="items" v-model="value">
+  <BaseDropdown v-model="value" :items="items">
     <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
 
     <template #item="{ item, isSelected, isHighlighted }">
@@ -524,7 +462,7 @@ provided, the `item` slot will be used for that.
     data() {
       return {
         items: ['a', 2, { id: '3' }],
-        value: ['a']
+        value: 'a'
       };
     }
   };
diff --git a/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue b/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue
index 666a576fd..fc17a32f5 100644
--- a/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue
+++ b/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue
@@ -1,29 +1,29 @@
 <template>
   <BaseDropdown
-    @change="emitEvent"
-    :value="selectedColumns"
+    @update:modelValue="emitEvent"
+    :modelValue="selectedColumns"
     :items="columns"
     :animation="animation"
     aria-label="Select number of columns"
   >
     <template v-if="$scopedSlots.toggle" #toggle="{ item, isOpen }">
       <!--
-           @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle
-           button. If not provided, it uses the `item` slot as fallback.
-           @binding {string|number|Identifiable} item - The item data to render.
-           @binding {boolean} isOpen - True if the dropdown is opened, and false if it is
-           closed.
-        -->
+       @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle
+       button. If not provided, it uses the `item` slot as fallback.
+       @binding {string|number|Identifiable} item - The item data to render.
+       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is
+       closed.
+      -->
       <slot name="toggle" v-bind="{ item, isOpen }" />
     </template>
     <template #item="{ item, isSelected, isHighlighted }">
       <!--
-           @slot (required) From `BaseDropdown` component: Used to render each one of the items
-           content, and as fallback for the toggle button content slot if it is not provided.
-             @binding {string|number|Identifiable} item - Item to render
-             @binding {boolean} isHighlighted - True when the item has the focus.
-             @binding {boolean} isSelected - True when the item is selected.
-        -->
+       @slot (required) From `BaseDropdown` component: Used to render each one of the items
+       content, and as fallback for the toggle button content slot if it is not provided.
+       @binding {string|number|Identifiable} item - Item to render
+       @binding {boolean} isHighlighted - True when the item has the focus.
+       @binding {boolean} isSelected - True when the item is selected.
+      -->
       <slot name="item" v-bind="{ item, isSelected, isHighlighted }" />
     </template>
   </BaseDropdown>
diff --git a/packages/x-components/src/components/no-element.ts b/packages/x-components/src/components/no-element.ts
index f46bb96a6..ba4daaebb 100644
--- a/packages/x-components/src/components/no-element.ts
+++ b/packages/x-components/src/components/no-element.ts
@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { useNoElementRender } from '../composables/index';
+import { useNoElementRender } from '../composables/use-no-element-render';
 
 /**
  * The purpose of this Component is to use as default value for props that receive a Component that
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 46c582695..59cebef86 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -192,11 +192,11 @@
 
             <RenderlessExtraParams #default="{ value, updateValue }" name="store">
               <BaseDropdown
-                @change="updateValue"
+                @update:modelValue="updateValue"
+                :modelValue="value"
+                :items="stores"
                 class="x-dropdown x-dropdown--round x-dropdown--right x-dropdown--l"
                 data-test="store-selector"
-                :value="value"
-                :items="stores"
               />
             </RenderlessExtraParams>
           </div>
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 86f08e617..05b32ff03 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
@@ -75,7 +75,7 @@ default value of it.
 ```vue
 <template>
   <RenderlessExtraParam #default="{ value, updateValue }" name="store">
-    <BaseDropdown @change="updateValue" :value="value" :items="items" />
+    <BaseDropdown @update:modelValue="updateValue" :modelValue="value" :items="items" />
   </RenderlessExtraParam>
 </template>
 
diff --git a/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts b/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts
index 72da2e215..d234dd538 100644
--- a/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts
+++ b/packages/x-components/src/x-modules/history-queries/components/__tests__/my-history.spec.ts
@@ -191,7 +191,9 @@ describe('testing MyHistory component', () => {
     });
 
     expect(wrapper.get(getDataTestSelector('suggestion-query')).text()).toBe('testQuery');
-    expect(wrapper.get(getDataTestSelector('suggestion-date')).text()).toBe('09:40 AM');
+    expect(wrapper.get(getDataTestSelector('suggestion-date')).text().replace(/\s/g, '')).toEqual(
+      '09:40AM'
+    );
   });
 
   it('allows to add classes to the queries list', () => {
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/sort-dropdown.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/sort-dropdown.spec.ts
index 165baecd8..2f65d3c5c 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/sort-dropdown.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/sort-dropdown.spec.ts
@@ -1,20 +1,18 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { Sort } from '@empathyco/x-types';
+import { createLocalVue, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Vuex, { Store } from 'vuex';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
+import { searchXModule } from '../../x-module';
 import SortDropdown from '../sort-dropdown.vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { RootXStoreState } from '../../../../store/store.types';
 import { XPlugin } from '../../../../plugins/x-plugin';
-import { searchXModule } from '../../x-module';
-import { WirePayload } from '../../../../wiring/wiring.types';
 import { resetXSearchStateWith } from './utils';
 
 function renderSortDropdown({
   template = `
-   <SortDropdown v-bind="$attrs">
+   <SortDropdown :items="items">
       <template #toggle="{ item }">
         {{ item }}
       </template>
@@ -22,20 +20,16 @@ function renderSortDropdown({
         {{ item }}
       </template>
    </SortDropdown>`,
-  items = ['', 'Price low to high', 'Price high to low'],
+  items = ['default', 'Price low to high', 'Price high to low'],
   selectedSort = items[0]
-}: RenderSortDropdownOptions = {}): RenderSortDropdownAPI {
+}: Partial<{ template?: string; items?: any[]; selectedSort?: any }> = {}) {
   const localVue = createLocalVue();
   localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
-  XPlugin.resetInstance();
-  XPlugin.registerXModule(searchXModule);
-  resetXSearchStateWith(store, {
-    sort: selectedSort
-  });
-
   installNewXPlugin({ store }, localVue);
+  XPlugin.registerXModule(searchXModule);
+  resetXSearchStateWith(store, { sort: selectedSort });
 
   const onSelectedSortProvided = jest.fn();
   XPlugin.bus.on('SelectedSortProvided', true).subscribe(onSelectedSortProvided);
@@ -44,48 +38,30 @@ function renderSortDropdown({
 
   const wrapper = mount(
     {
+      template,
       components: { SortDropdown },
-      template
+      props: ['items']
     },
     {
       localVue,
       store,
-      propsData: {
-        items
-      }
+      propsData: { items }
     }
   );
 
-  const sortDropdownWrapper = wrapper.findComponent(SortDropdown);
-
+  const sortDropdown = wrapper.findComponent(SortDropdown);
   return {
-    wrapper: sortDropdownWrapper,
+    wrapper: sortDropdown,
     onSelectedSortProvided,
     onUserClickedASort,
-    async clickToggleButton() {
-      await sortDropdownWrapper.get(getDataTestSelector('dropdown-toggle')).trigger('click');
-    },
-    async clickNthItem(index) {
-      await sortDropdownWrapper
-        .findAll(getDataTestSelector('dropdown-item'))
-        .at(index)
-        .trigger('click');
-    },
-    getSelectedItem() {
-      return sortDropdownWrapper.get('[aria-selected=true]');
-    },
-    getToggleButton() {
-      return sortDropdownWrapper.get(getDataTestSelector('dropdown-toggle'));
-    },
-    getHighlightedItem() {
-      return sortDropdownWrapper.get('[aria-selected=true]');
-    },
-    async setItems(items) {
-      await wrapper.setProps({
-        items
-      });
+    getSelectedItem: () => sortDropdown.find('.x-dropdown__item--is-selected'),
+    getToggleButton: () => sortDropdown.find(getDataTestSelector('dropdown-toggle')),
+    clickToggleButton: async () =>
+      await sortDropdown.find(getDataTestSelector('dropdown-toggle')).trigger('click'),
+    clickNthItem: async (index: number) => {
+      await sortDropdown.findAll(getDataTestSelector('dropdown-item')).at(index).trigger('click');
     }
-  };
+  } as const;
 }
 
 describe('testing SortDropdown component', () => {
@@ -106,46 +82,46 @@ describe('testing SortDropdown component', () => {
       clickToggleButton,
       getToggleButton,
       getSelectedItem,
-      getHighlightedItem,
       onUserClickedASort
-    } = renderSortDropdown({ items: ['price', 'relevance', 'offer'] });
+    } = renderSortDropdown({
+      items: ['price', 'relevance', 'offer']
+    });
 
     await clickToggleButton();
     await clickNthItem(2);
     await clickToggleButton();
+    await nextTick();
 
-    expect(getToggleButton().text()).toEqual('offer');
-    expect(getSelectedItem().text()).toEqual('offer');
-    expect(getHighlightedItem().text()).toEqual('offer');
     expect(onUserClickedASort).toHaveBeenCalledTimes(1);
-    expect(onUserClickedASort).toHaveBeenCalledWith<[WirePayload<Sort>]>({
+    expect(onUserClickedASort).toHaveBeenCalledWith({
       eventPayload: 'offer',
       metadata: {
         moduleName: 'search',
         target: wrapper.vm.$el as HTMLElement,
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
+    expect(getToggleButton().text()).toEqual('offer');
+    expect(getSelectedItem().text()).toEqual('offer');
   });
-  // eslint-disable-next-line max-len
-  it('returns a default empty string at first', () => {
+
+  it('returns the first item as default', () => {
     const { onSelectedSortProvided } = renderSortDropdown();
 
     expect(onSelectedSortProvided).toHaveBeenCalledTimes(1);
-    expect(onSelectedSortProvided).toHaveBeenCalledWith<[WirePayload<Sort>]>({
-      eventPayload: '',
-      // This event gets emitted immediately, before the component has been mounted
-      metadata: { moduleName: 'search', target: undefined, location: undefined, replaceable: true }
+    // This event gets emitted immediately, before the component has been mounted
+    expect(onSelectedSortProvided).toHaveBeenCalledWith({
+      eventPayload: 'default',
+      metadata: { moduleName: 'search', location: 'none', replaceable: true }
     });
   });
 
   describe('slots', () => {
     it('allows to customize each item using the slots', async () => {
-      const { getSelectedItem, getHighlightedItem, clickToggleButton } = renderSortDropdown({
-        items: ['', 'Price low to high', 'Price high to low'],
+      const { getSelectedItem, clickToggleButton } = renderSortDropdown({
         template: `
-          <SortDropdown v-bind="$attrs">
+          <SortDropdown :items="items">
             <template #item="{ item, isSelected, isHighlighted }">
               <span v-if="isSelected">✅</span>
               <span v-if="isHighlighted">🟢</span>
@@ -155,80 +131,22 @@ describe('testing SortDropdown component', () => {
       });
 
       await clickToggleButton();
-
-      expect(getSelectedItem().text()).toBe(`✅ 🟢`);
-      expect(getHighlightedItem().text()).toBe(`✅ 🟢`);
+      expect(getSelectedItem().text()).toEqual(`✅ 🟢 default`);
     });
 
     it('allows to customize the toggle button', async () => {
       const { getToggleButton, clickToggleButton } = renderSortDropdown({
-        items: ['', 'Price low to high', 'Price high to low'],
         template: `
-          <SortDropdown v-bind="$attrs">
+          <SortDropdown :items="items">
             <template #toggle="{ item, isOpen }">
               {{ item }} {{ isOpen ? '🔽' : '🔼'}}
             </template>
           </SortDropdown>`
       });
 
-      expect(getToggleButton().text()).toBe('🔼');
-
+      expect(getToggleButton().text()).toEqual('default 🔼');
       await clickToggleButton();
-
-      expect(getToggleButton().text()).toBe('🔽');
+      expect(getToggleButton().text()).toEqual('default 🔽');
     });
   });
 });
-
-interface RenderSortDropdownOptions {
-  /** The template to render in the test, including the `SortDropdown` component. */
-  template?: string;
-  /** The possible values of the sort dropdown. Passed as prop to the `SortDropdown`. */
-  items?: Sort[];
-  /** The store selected sort value. The store state is reset with this sort in each test. */
-  selectedSort?: Sort;
-}
-
-interface RenderSortDropdownAPI {
-  /** The test wrapper of the {@link SortDropdown} component. */
-  wrapper: Wrapper<Vue>;
-  /** Jest mock listener for the {@link SearchXEvents.SelectedSortProvided} event. */
-  onSelectedSortProvided: jest.Mock;
-  /** Jest mock listener for the {@link SearchXEvents.UserClickedASort} event. */
-  onUserClickedASort: jest.Mock;
-  /** Retrieves the wrapper for the button that opens and closes the dropdown. */
-  getToggleButton: () => Wrapper<Vue>;
-  /**
-   * Retrieves the highlighted item wrapper.
-   * The dropdown must be open before this function is called.
-   *
-   * @returns A test wrapper for the highlighted item.
-   */
-  getHighlightedItem: () => Wrapper<Vue>;
-  /**
-   * Retrieves the selected item wrapper.
-   * The dropdown must be open before this function is called.
-   *
-   * @returns A test wrapper for the selected item.
-   */
-  getSelectedItem: () => Wrapper<Vue>;
-  /**
-   * Clicks the button to open or close the dropdown.
-   *
-   * @returns A promise that resolves after the view has been updated.
-   */
-  clickToggleButton: () => Promise<void>;
-  /**
-   * Clicks the item with the provided index.
-   * The dropdown must be open before this function is called.
-   *
-   * @returns A promise that resolves after the view has been updated.
-   */
-  clickNthItem: (index: number) => Promise<void>;
-  /**
-   * Updates the `items` prop of the {@link SortDropdown} component.
-   *
-   * @returns A promise that resolves after the view has been updated.
-   */
-  setItems: (items: Sort[]) => Promise<void>;
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts
index 7addbe138..c3705b5a9 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/sort-list.spec.ts
@@ -1,10 +1,8 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { Sort } from '@empathyco/x-types';
+import { createLocalVue, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Vuex, { Store } from 'vuex';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { WirePayload } from '../../../../wiring';
 import SortList from '../sort-list.vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { RootXStoreState } from '../../../../store/store.types';
@@ -14,25 +12,21 @@ import { resetXSearchStateWith } from './utils';
 
 function renderSortList({
   template = `
-   <SortList v-bind="$attrs">
+   <SortList :items="items">
       <template #default="{ item }">
         {{ item }}
       </template>
    </SortList>`,
-  items = ['', 'Price low to high', 'Price high to low'],
+  items = ['default', 'Price low to high', 'Price high to low'],
   selectedSort = items[0]
-}: RenderSortListOptions = {}): RenderSortListAPI {
+}: Partial<{ template?: string; items?: any[]; selectedSort?: any }> = {}) {
   const localVue = createLocalVue();
   localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
-  XPlugin.resetInstance();
-  XPlugin.registerXModule(searchXModule);
-  resetXSearchStateWith(store, {
-    sort: selectedSort
-  });
-
   installNewXPlugin({ store }, localVue);
+  XPlugin.registerXModule(searchXModule);
+  resetXSearchStateWith(store, { sort: selectedSort });
 
   const onSelectedSortProvided = jest.fn();
   XPlugin.bus.on('SelectedSortProvided', true).subscribe(onSelectedSortProvided);
@@ -41,40 +35,28 @@ function renderSortList({
 
   const wrapper = mount(
     {
+      template,
       components: { SortList },
-      template
+      props: ['items']
     },
     {
       localVue,
       store,
-      propsData: {
-        items
-      }
+      propsData: { items }
     }
   );
 
-  const sortListWrapper = wrapper.findComponent(SortList);
+  const sortList = wrapper.findComponent(SortList);
 
   return {
-    wrapper: sortListWrapper,
+    wrapper: sortList,
     onUserClickedASort,
     onSelectedSortProvided,
-    async clickNthItem(index) {
-      await sortListWrapper
-        .findAll(getDataTestSelector('x-sort-button'))
-        .at(index)
-        .trigger('click');
-    },
-    getButton(index) {
-      return wrapper.vm.$el.children[index].children[0] as HTMLElement;
-    },
-    getSelectedItem() {
-      return sortListWrapper.get('.x-sort-list__item--is-selected');
-    },
-    async setItems(items) {
-      await wrapper.setProps({
-        items
-      });
+    getButton: (index: number) => wrapper.vm.$el.children[index].children[0] as HTMLElement,
+    getSelectedItem: () => sortList.get('.x-sort-list__item--is-selected'),
+    clickNthItem: async (index: number) => {
+      await sortList.findAll(getDataTestSelector('x-sort-button')).at(index).trigger('click');
+      await nextTick();
     }
   };
 }
@@ -82,7 +64,7 @@ function renderSortList({
 describe('testing SortList component', () => {
   it('is an XComponent', () => {
     const { wrapper } = renderSortList();
-    expect(isXComponent(wrapper.vm)).toBe(true);
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
   });
 
   it('is an XComponent that belongs to the search module', () => {
@@ -95,44 +77,39 @@ describe('testing SortList component', () => {
       items: ['price', 'relevance', 'offer']
     });
 
-    const buttonWrapper = getButton(2);
     await clickNthItem(2);
 
-    expect(getSelectedItem().text()).toEqual('offer');
     expect(onUserClickedASort).toHaveBeenCalledTimes(1);
-    expect(onUserClickedASort).toHaveBeenCalledWith<[WirePayload<Sort>]>({
+    expect(onUserClickedASort).toHaveBeenCalledWith({
       eventPayload: 'offer',
       metadata: {
         moduleName: 'search',
-        target: buttonWrapper,
-        location: undefined,
+        target: getButton(2),
+        location: undefined, // TODO - Emission by BaseEventButton in the old way. `none` when use$x
         replaceable: true
       }
     });
+    expect(getSelectedItem().text()).toEqual('offer');
   });
 
-  // eslint-disable-next-line max-len
   it('emits the first element of the `items` prop as the provided sort', () => {
-    const { onSelectedSortProvided } = renderSortList({
-      items: ['price desc', 'price asc', '']
-    });
+    const { onSelectedSortProvided } = renderSortList();
 
     expect(onSelectedSortProvided).toHaveBeenCalledTimes(1);
-    expect(onSelectedSortProvided).toHaveBeenCalledWith<[WirePayload<Sort>]>({
-      eventPayload: '',
+    expect(onSelectedSortProvided).toHaveBeenCalledWith({
+      eventPayload: 'default',
       // This event gets emitted immediately, before the component has been mounted
-      metadata: { moduleName: 'search', location: undefined, replaceable: true }
+      metadata: { moduleName: 'search', location: 'none', replaceable: true }
     });
   });
 
   describe('slots', () => {
     it('allows to customize each item using the default slot', () => {
       const { getSelectedItem } = renderSortList({
-        items: ['', 'Price low to high', 'Price high to low'],
         template: `
-          <SortList v-bind="$attrs">
+          <SortList :items="items">
             <template #default="{ item, isSelected }">
-              <span>{{isSelected}}</span>
+              <span>{{ isSelected }}</span>
             </template>
           </SortList>`
       });
@@ -141,45 +118,3 @@ describe('testing SortList component', () => {
     });
   });
 });
-
-interface RenderSortListOptions {
-  /** The template to render in the test, including the `SortList` component. */
-  template?: string;
-  /** The possible values of the sort dropdown. Passed as prop to the `SortList`. */
-  items?: Sort[];
-  /** The store selected sort value. The store state is reset with this sort in each test. */
-  selectedSort?: Sort;
-}
-
-interface RenderSortListAPI {
-  /**
-   * Clicks the item with the provided index.
-   *
-   * @returns A promise that resolves after the view has been updated.
-   */
-  clickNthItem: (index: number) => Promise<void>;
-  /** Jest mock listener for the {@link SearchXEvents.UserClickedASort} event. */
-  onUserClickedASort: jest.Mock;
-  /** Jest mock listener for the {@link SearchXEvents.SelectedSortProvided} event. */
-  onSelectedSortProvided: jest.Mock;
-  /**
-   * Retrieves the selected button as HTMLElement.
-   *
-   * @returns A test button for the selected item.
-   */
-  getButton: (index: number) => HTMLElement;
-  /**
-   * Retrieves the selected item wrapper.
-   *
-   * @returns A test wrapper for the selected item.
-   */
-  getSelectedItem: () => Wrapper<Vue>;
-  /**
-   * Updates the `items` prop of the {@link SortDropdown} component.
-   *
-   * @returns A promise that resolves after the view has been updated.
-   */
-  setItems: (items: Sort[]) => Promise<void>;
-  /** The test wrapper of the {@link SortList} component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
index 798471e60..36e3abbbf 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/sort-picker-list.spec.ts
@@ -1,10 +1,8 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { Sort } from '@empathyco/x-types';
+import { createLocalVue, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Vuex, { Store } from 'vuex';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { WirePayload } from '../../../../wiring';
 import SortPickerList from '../sort-picker-list.vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { RootXStoreState } from '../../../../store/store.types';
@@ -14,26 +12,22 @@ import { resetXSearchStateWith } from './utils';
 
 function renderSortPickerList({
   template = `
-   <SortPickerList v-bind="$attrs">
+   <SortPickerList :items="items" :buttonClass="buttonClass">
       <template #default="{ item }">
         {{ item }}
       </template>
    </SortPickerList>`,
-  items = ['', 'Price low to high', 'Price high to low'],
+  items = ['default', 'Price low to high', 'Price high to low'],
   selectedSort = items[0],
   buttonClass
-}: RenderSortPickerListOptions = {}): RenderSortPickerListAPI {
+}: Partial<{ template?: string; items?: any[]; selectedSort?: any; buttonClass?: string }> = {}) {
   const localVue = createLocalVue();
   localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
-  XPlugin.resetInstance();
-  XPlugin.registerXModule(searchXModule);
-  resetXSearchStateWith(store, {
-    sort: selectedSort
-  });
-
   installNewXPlugin({ store }, localVue);
+  XPlugin.registerXModule(searchXModule);
+  resetXSearchStateWith(store, { sort: selectedSort });
 
   const onSelectedSortProvided = jest.fn();
   XPlugin.bus.on('SelectedSortProvided', true).subscribe(onSelectedSortProvided);
@@ -42,8 +36,9 @@ function renderSortPickerList({
 
   const wrapper = mount(
     {
+      template,
       components: { SortPickerList },
-      template
+      props: ['items', 'buttonClass']
     },
     {
       localVue,
@@ -55,28 +50,20 @@ function renderSortPickerList({
     }
   );
 
-  const sortPickerListWrapper = wrapper.findComponent(SortPickerList);
+  const sortPickerList = wrapper.findComponent(SortPickerList);
 
   return {
-    wrapper: sortPickerListWrapper,
+    wrapper: sortPickerList,
     onUserClickedASort,
     onSelectedSortProvided,
-    async clickNthItem(index) {
-      await sortPickerListWrapper
+    getButton: (index: number) => wrapper.vm.$el.children[index] as HTMLElement,
+    getSelectedItem: () => sortPickerList.get('.x-selected'),
+    clickNthItem: async (index: number) => {
+      await sortPickerList
         .findAll(getDataTestSelector('sort-picker-button'))
         .at(index)
         .trigger('click');
-    },
-    getButton(index) {
-      return wrapper.vm.$el.children[index] as HTMLElement;
-    },
-    getSelectedItem() {
-      return sortPickerListWrapper.get('.x-selected');
-    },
-    async setItems(items) {
-      await wrapper.setProps({
-        items
-      });
+      await nextTick();
     }
   };
 }
@@ -84,7 +71,7 @@ function renderSortPickerList({
 describe('testing SortPickerList component', () => {
   it('is an XComponent', () => {
     const { wrapper } = renderSortPickerList();
-    expect(isXComponent(wrapper.vm)).toBe(true);
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
   });
 
   it('is an XComponent that belongs to the search module', () => {
@@ -97,51 +84,46 @@ describe('testing SortPickerList component', () => {
       items: ['price', 'relevance', 'offer']
     });
 
-    const buttonWrapper = getButton(2);
     await clickNthItem(2);
 
-    expect(getSelectedItem().text()).toEqual('offer');
     expect(onUserClickedASort).toHaveBeenCalledTimes(1);
-    expect(onUserClickedASort).toHaveBeenCalledWith<[WirePayload<Sort>]>({
+    expect(onUserClickedASort).toHaveBeenCalledWith({
       eventPayload: 'offer',
       metadata: {
         moduleName: 'search',
-        target: buttonWrapper,
-        location: undefined,
+        target: getButton(2),
+        location: undefined, // TODO - Emission by BaseEventButton in the old way. `none` when use$x
         replaceable: true
       }
     });
+    expect(getSelectedItem().text()).toEqual('offer');
   });
 
-  // eslint-disable-next-line max-len
   it('emits the first element of the `items` prop as the provided sort', () => {
-    const { onSelectedSortProvided } = renderSortPickerList({
-      items: ['price desc', 'price asc', '']
-    });
+    const { onSelectedSortProvided } = renderSortPickerList();
 
     expect(onSelectedSortProvided).toHaveBeenCalledTimes(1);
-    expect(onSelectedSortProvided).toHaveBeenCalledWith<[WirePayload<Sort>]>({
-      eventPayload: '',
+    expect(onSelectedSortProvided).toHaveBeenCalledWith({
+      eventPayload: 'default',
       // This event gets emitted immediately, before the component has been mounted
-      metadata: { moduleName: 'search', location: undefined, replaceable: true }
+      metadata: { moduleName: 'search', location: 'none', replaceable: true }
     });
   });
 
   it('allows adding classes to the button', () => {
     const { wrapper } = renderSortPickerList({ buttonClass: 'custom-class' });
     const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button'));
+
     expect(buttons.length).toBeTruthy();
     buttons.wrappers.forEach(button => {
-      expect(button.classes('custom-class')).toBe(true);
+      expect(button.classes('custom-class')).toBeTruthy();
     });
   });
 
   it('adds the aria pressed attribute to the selected item', async () => {
-    const { wrapper, getButton } = renderSortPickerList({ items: ['name', 'price'] });
-    const button = getButton(1);
+    const { wrapper, clickNthItem } = renderSortPickerList();
 
-    button.click();
-    await wrapper.vm.$nextTick();
+    await clickNthItem(1);
 
     const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button')).wrappers;
     expect(buttons[0].element).not.toHaveAttribute('aria-pressed');
@@ -149,14 +131,13 @@ describe('testing SortPickerList component', () => {
   });
 
   it('adds corresponding classes to the selected element', async () => {
-    const { wrapper, getButton } = renderSortPickerList({ items: ['name', 'price'] });
-    getButton(1).click();
-    await wrapper.vm.$nextTick();
+    const { wrapper, clickNthItem } = renderSortPickerList({ items: ['name', 'price'] });
 
-    const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button')).wrappers;
-    expect(buttons[0].classes('x-selected')).toBe(false);
+    await clickNthItem(1);
 
-    expect(buttons[1].classes('x-selected')).toBe(true);
+    const buttons = wrapper.findAll(getDataTestSelector('sort-picker-button')).wrappers;
+    expect(buttons[0].classes('x-selected')).toBeFalsy();
+    expect(buttons[1].classes('x-selected')).toBeTruthy();
   });
 
   describe('slots', () => {
@@ -164,9 +145,9 @@ describe('testing SortPickerList component', () => {
       const { getSelectedItem } = renderSortPickerList({
         items: ['', 'Price low to high', 'Price high to low'],
         template: `
-          <SortPickerList v-bind="$attrs">
+          <SortPickerList :items="items">
             <template #default="{ item, isSelected }">
-              <span>{{isSelected}}</span>
+              <span>{{ isSelected }}</span>
             </template>
           </SortPickerList>`
       });
@@ -175,47 +156,3 @@ describe('testing SortPickerList component', () => {
     });
   });
 });
-
-interface RenderSortPickerListOptions {
-  /** The template to render in the test, including the `SortPickerList` component. */
-  template?: string;
-  /** The possible values of the sort dropdown. Passed as prop to the `SortPickerList`. */
-  items?: Sort[];
-  /** The store selected sort value. The store state is reset with this sort in each test. */
-  selectedSort?: Sort;
-  /** Class to customize the button element. */
-  buttonClass?: string;
-}
-
-interface RenderSortPickerListAPI {
-  /**
-   * Clicks the item with the provided index.
-   *
-   * @returns A promise that resolves after the view has been updated.
-   */
-  clickNthItem: (index: number) => Promise<void>;
-  /** Jest mock listener for the {@link SearchXEvents.UserClickedASort} event. */
-  onUserClickedASort: jest.Mock;
-  /** Jest mock listener for the {@link SearchXEvents.SelectedSortProvided} event. */
-  onSelectedSortProvided: jest.Mock;
-  /**
-   * Retrieves the selected button as HTMLElement.
-   *
-   * @returns A test button for the selected item.
-   */
-  getButton: (index: number) => HTMLElement;
-  /**
-   * Retrieves the selected item wrapper.
-   *
-   * @returns A test wrapper for the selected item.
-   */
-  getSelectedItem: () => Wrapper<Vue>;
-  /**
-   * Updates the `items` prop of the {@link SortDropdown} component.
-   *
-   * @returns A promise that resolves after the view has been updated.
-   */
-  setItems: (items: Sort[]) => Promise<void>;
-  /** The test wrapper of the {@link SortPickerList} component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/search/components/index.ts b/packages/x-components/src/x-modules/search/components/index.ts
index 2660d89f0..8bcfc259c 100644
--- a/packages/x-components/src/x-modules/search/components/index.ts
+++ b/packages/x-components/src/x-modules/search/components/index.ts
@@ -10,6 +10,5 @@ export { default as ResultsList } from './results-list.vue';
 export { default as SortDropdown } from './sort-dropdown.vue';
 export { default as SortList } from './sort-list.vue';
 export { default as SortPickerList } from './sort-picker-list.vue';
-export { default as SortMixin } from './sort.mixin';
 export { default as Spellcheck } from './spellcheck.vue';
 export { default as SpellcheckButton } from './spellcheck-button.vue';
diff --git a/packages/x-components/src/x-modules/search/components/sort-dropdown.vue b/packages/x-components/src/x-modules/search/components/sort-dropdown.vue
index f56e2818d..8175b1ee0 100644
--- a/packages/x-components/src/x-modules/search/components/sort-dropdown.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-dropdown.vue
@@ -1,9 +1,10 @@
 <template>
   <BaseDropdown
-    @change="emitUserClickedASort"
-    :animation="animation"
+    ref="rootRef"
+    @update:modelValue="emitUserClickedASort"
     :items="items"
-    :value="selectedSort"
+    :modelValue="selectedSort"
+    :animation="animation"
     class="x-sort-dropdown"
     data-test="sort-dropdown"
     aria-label="Select sorting"
@@ -32,48 +33,61 @@
 
 <script lang="ts">
   import { Sort } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
+  import Vue, { defineComponent, PropType, ref, watch } from 'vue';
+
   import BaseDropdown from '../../../components/base-dropdown.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { use$x, useRegisterXModule, useState } from '../../../composables';
   import { searchXModule } from '../x-module';
-  import SortMixin from './sort.mixin';
 
   /**
    * The `SortDropdown` component allows user to select the search results order. This component
    * also allows to change the selected sort programmatically.
-   *
-   * @remarks It extends {@link SortMixin}.
-   *
-   * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule)],
+  export default defineComponent({
+    name: 'SortDropdown',
+    xModule: searchXModule.name,
     components: { BaseDropdown },
-    model: {
-      event: 'change'
-    }
-  })
-  export default class SortDropdown extends mixins(SortMixin) {
-    /**
-     * The transition to use for opening and closing the dropdown.
-     *
-     * @public
-     */
-    @Prop()
-    public animation?: string | typeof Vue;
-    /**
-     * Emits the events related to the selection of a sort value.
-     *
-     * @param sort - The selected sort.
-     * @internal
-     */
-    protected emitUserClickedASort(sort: Sort): void {
-      this.$x.emit('UserClickedASort', sort, { target: this.$el as HTMLElement });
-      this.$emit('change', sort);
+    props: {
+      /** The list of possible sort values. */
+      items: {
+        type: Array as PropType<Sort[]>,
+        required: true
+      },
+      /** The transition to use for opening and closing the dropdown. */
+      animation: [String, Object] as PropType<string | typeof Vue>
+    },
+    emits: ['change'],
+    setup(_, { emit }) {
+      useRegisterXModule(searchXModule);
+      const $x = use$x();
+
+      const { sort: selectedSort } = useState('search', ['sort']);
+      const rootRef = ref<typeof BaseDropdown>();
+
+      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {
+        immediate: true
+      });
+
+      /**
+       * Emits the events related to the selection of a sort value.
+       *
+       * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands
+       * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.
+       *
+       * @param sort - The selected sort.
+       */
+      function emitUserClickedASort(sort: Sort) {
+        $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el });
+        emit('change', sort);
+      }
+
+      return {
+        emitUserClickedASort,
+        rootRef,
+        selectedSort
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/search/components/sort-list.vue b/packages/x-components/src/x-modules/search/components/sort-list.vue
index cdaf20eac..83e3d047d 100644
--- a/packages/x-components/src/x-modules/search/components/sort-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-list.vue
@@ -21,68 +21,74 @@
 
 <script lang="ts">
   import { Sort } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { BaseEventButton } from '../../../components';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
-  import { VueCSSClasses } from '../../../utils';
-  import { XEventsTypes } from '../../../wiring';
+  import Vue, { computed, defineComponent, PropType, watch } from 'vue';
+  import BaseEventButton from '../../../components/base-event-button.vue';
+  import { use$x, useRegisterXModule, useState } from '../../../composables';
+  import { VueCSSClasses } from '../../../utils/types';
+  import { XEventsTypes } from '../../../wiring/events.types';
   import { searchXModule } from '../x-module';
-  import SortMixin from './sort.mixin';
 
   /**
    * Sort list item options.
-   *
-   * @public
    */
   interface SortListItem {
     item: Sort;
     cssClasses: VueCSSClasses;
     event: Partial<XEventsTypes>;
   }
+
   /**
    * The `SortList` component allows user to select the search results order. This component
    * also allows to change the selected sort programmatically.
-   *
-   * @remarks It extends {@link SortMixin}.
-   *
-   * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule)],
-    components: {
-      BaseEventButton
-    }
-  })
-  export default class SortList extends mixins(SortMixin) {
-    /**
-     * The transition to use for rendering the list.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    public animation?: string | typeof Vue;
-    /**
-     * Sort list items.
-     *
-     * @returns A list of items with their css class and the event associate to it.
-     *
-     * @internal
-     */
-    protected get listItems(): SortListItem[] {
-      return this.items.map(item => ({
-        item,
-        cssClasses: [
-          {
-            'x-sort-list__item--is-selected': item === this.selectedSort,
-            'x-option-list__item--is-selected': item === this.selectedSort
-          }
-        ],
-        event: { UserClickedASort: item }
-      }));
+  export default defineComponent({
+    name: 'SortList',
+    xModule: searchXModule.name,
+    components: { BaseEventButton },
+    props: {
+      /** The list of possible sort values. */
+      items: {
+        type: Array as PropType<Sort[]>,
+        required: true
+      },
+      /** The transition to use for rendering the list. */
+      animation: {
+        type: [String, Object] as PropType<string | typeof Vue>,
+        default: () => 'ul'
+      }
+    },
+    setup(props) {
+      useRegisterXModule(searchXModule);
+      const $x = use$x();
+
+      const { sort: selectedSort } = useState('search', ['sort']);
+
+      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {
+        immediate: true
+      });
+
+      /**
+       * Sort list items.
+       *
+       * @returns A list of items with their css class and the event associate to it.
+       */
+      const listItems = computed<SortListItem[]>(() =>
+        props.items.map(item => ({
+          item,
+          cssClasses: {
+            'x-sort-list__item--is-selected': item === selectedSort.value,
+            'x-option-list__item--is-selected': item === selectedSort.value
+          },
+          event: { UserClickedASort: item }
+        }))
+      );
+
+      return {
+        listItems,
+        selectedSort
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
index edbec076a..20b4ed296 100644
--- a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
@@ -24,68 +24,75 @@
 
 <script lang="ts">
   import { Sort } from '@empathyco/x-types';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import Vue from 'vue';
-  import { BaseEventButton } from '../../../components';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
-  import { VueCSSClasses } from '../../../utils';
-  import { XEventsTypes } from '../../../wiring';
+  import Vue, { computed, defineComponent, PropType, watch } from 'vue';
+  import BaseEventButton from '../../../components/base-event-button.vue';
+  import { use$x, useRegisterXModule, useState } from '../../../composables';
+  import { VueCSSClasses } from '../../../utils/types';
+  import { XEventsTypes } from '../../../wiring/events.types';
   import { searchXModule } from '../x-module';
-  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';
-  import SortMixin from './sort.mixin';
 
   /**
    * Sort Picker item options.
-   *
-   * @public
    */
   interface SortPickerItem {
     item: Sort;
     cssClasses: VueCSSClasses;
     event: Partial<XEventsTypes>;
   }
+
   /**
    * The `SortPickerList` component allows user to select the search results order. This component
    * also allows to change the selected sort programmatically.
-   *
-   * @remarks It extends {@link SortMixin}.
-   *
-   * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['buttonClass'])],
-    components: {
-      BaseEventButton
-    }
-  })
-  export default class SortPickerList extends mixins(SortMixin) {
-    /**
-     * The transition to use for rendering the list.
-     *
-     * @public
-     */
-    @Prop({ default: 'div' })
-    public animation?: string | typeof Vue;
-    /**
-     * Sort list items.
-     *
-     * @returns A list of items with their css class and the event associate to it.
-     *
-     * @internal
-     */
-    protected get listItems(): SortPickerItem[] {
-      return this.items.map(item => ({
-        item,
-        cssClasses: [
-          {
-            'x-selected': item === this.selectedSort
-          }
-        ],
-        event: { UserClickedASort: item }
-      }));
+  export default defineComponent({
+    name: 'SortPickerList',
+    xModule: searchXModule.name,
+    components: { BaseEventButton },
+    props: {
+      /** The list of possible sort values. */
+      items: {
+        type: Array as PropType<Sort[]>,
+        required: true
+      },
+      /** The transition to use for rendering the list. */
+      animation: {
+        type: [String, Object] as PropType<string | typeof Vue>,
+        default: () => 'div'
+      },
+      /** Class inherited by each sort button. */
+      buttonClass: String
+    },
+    setup(props) {
+      useRegisterXModule(searchXModule);
+      const $x = use$x();
+
+      const { sort: selectedSort } = useState('search', ['sort']);
+
+      watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {
+        immediate: true
+      });
+
+      /**
+       * Sort list items.
+       *
+       * @returns A list of items with their css class and the event associate to it.
+       */
+      const listItems = computed<SortPickerItem[]>(() =>
+        props.items.map(item => ({
+          item,
+          cssClasses: {
+            'x-selected': item === selectedSort.value
+          },
+          event: { UserClickedASort: item }
+        }))
+      );
+
+      return {
+        listItems,
+        selectedSort
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/search/components/sort.mixin.ts b/packages/x-components/src/x-modules/search/components/sort.mixin.ts
deleted file mode 100644
index 42e0dc72b..000000000
--- a/packages/x-components/src/x-modules/search/components/sort.mixin.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Sort } from '@empathyco/x-types';
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
-import { State, XEmit } from '../../../components';
-
-/**
- * Mixin to share Sort logic.
- *
- * @public
- */
-@Component
-export default class SortMixin extends Vue {
-  /**
-   * The list of possible sort values. If there are no values selected, the first item of
-   * this list will be selected.
-   *
-   * @public
-   */
-  @Prop({ required: true })
-  public items!: Sort[];
-
-  /**
-   * The search module selected sort. This is the source of truth when checking which
-   * sort is selected.
-   *
-   * @internal
-   */
-  @State('search', 'sort')
-  public selectedSort!: Sort;
-
-  /**
-   * Emits the {@link SearchXEvents.SelectedSortProvided | SelectedSortProvided} event whenever the
-   * provided {@link SortMixin.selectedSort} changes. If no value is provided, the first item of the
-   * {@link SortMixin.items} will be used as fallback.
-   *
-   * @returns The sorting value.
-   *
-   * @public
-   */
-  @XEmit('SelectedSortProvided')
-  public get providedSelectedSort(): Sort {
-    return this.selectedSort;
-  }
-}
diff --git a/packages/x-components/src/x-modules/search/store/module.ts b/packages/x-components/src/x-modules/search/store/module.ts
index 8430c7920..2da794895 100644
--- a/packages/x-components/src/x-modules/search/store/module.ts
+++ b/packages/x-components/src/x-modules/search/store/module.ts
@@ -136,7 +136,6 @@ export const searchXStoreModule: SearchXStoreModule = {
  *
  * @internal
  */
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function resettableState() {
   return {
     query: '',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a91aa203f..972a69368 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,9 +39,21 @@ importers:
 
   packages/_vue3-migration-test:
     dependencies:
+      '@empathyco/x-bus':
+        specifier: ^1.0.3-alpha.1
+        version: link:../x-bus
+      '@empathyco/x-types':
+        specifier: ^10.1.0-alpha.2
+        version: link:../x-types
+      '@empathyco/x-utils':
+        specifier: ^1.0.3-alpha.1
+        version: link:../x-utils
       '@vue/compat':
         specifier: ^3.4.22
         version: 3.4.22(vue@3.4.22)
+      '@vueuse/core':
+        specifier: ~10.7.1
+        version: 10.7.1(vue@3.4.22)
       vue:
         specifier: ^3.4.22
         version: 3.4.22(typescript@4.9.4)
@@ -6499,6 +6511,21 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/core@10.7.1(vue@3.4.22):
+    resolution:
+      {
+        integrity: sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==
+      }
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.7.1
+      '@vueuse/shared': 10.7.1(vue@3.4.22)
+      vue-demi: 0.14.6(vue@3.4.22)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/metadata@10.7.1:
     resolution:
       {
@@ -6518,6 +6545,18 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/shared@10.7.1(vue@3.4.22):
+    resolution:
+      {
+        integrity: sha512-v0jbRR31LSgRY/C5i5X279A/WQjD6/JsMzGa+eqt658oJ75IvQXAeONmwvEMrvJQKnRElq/frzBR7fhmWY5uLw==
+      }
+    dependencies:
+      vue-demi: 0.14.6(vue@3.4.22)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@yarnpkg/lockfile@1.1.0:
     resolution:
       {
@@ -20803,6 +20842,24 @@ packages:
       vue: 2.7.14
     dev: false
 
+  /vue-demi@0.14.6(vue@3.4.22):
+    resolution:
+      {
+        integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+      }
+    engines: { node: '>=12' }
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.4.22(typescript@4.9.4)
+    dev: false
+
   /vue-docgen-api@4.73.1(vue@2.7.14):
     resolution:
       {