diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 59ba1099e6..8ed2aadd1a 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.21](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.20...vue3-migration-test@1.0.0-alpha.21) (2024-05-31)
+
+
+### Features
+
+* **keyboard-navigation:** migrate keyboard-navigation component to composition API (#1493) ([4cf31c9](https://github.com/empathyco/x/commit/4cf31c9df4b751514deaaef4c9abfe4ee5ddfc40))
+
+
+
+## [1.0.0-alpha.20](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.19...vue3-migration-test@1.0.0-alpha.20) (2024-05-31)
+
+
+### Features
+
+* **panels:** migrate `base-panels` components to composition api (#1491) ([077ad4d](https://github.com/empathyco/x/commit/077ad4d1bcc1dcf0ae2e16a02f1ac073481a1892))
+* **result-images:** migrate result images components to composition API (#1496) ([624fb45](https://github.com/empathyco/x/commit/624fb459e71b3c0905e53ba70c1a3a15f581a0fc))
+
+
+
 ## [1.0.0-alpha.19](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.18...vue3-migration-test@1.0.0-alpha.19) (2024-05-30)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index a81bcc1a43..2a272ddf24 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.19",
+  "version": "1.0.0-alpha.21",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 5ee75b14a3..0210867c1e 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -10,3 +10,5 @@ export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './suggestions/test-base-suggestions.vue';
 export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
+export { default as TestBasePanel } from './panels/test-base-panel.vue';
+export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
diff --git a/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue b/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue
new file mode 100644
index 0000000000..714b37b7b5
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <h2>Base header toggle panel</h2>
+    <BaseHeaderTogglePanel :start-collapsed="false">
+      <template #header-content="{ open }">
+        <p>Header, open: {{ open ? 'close' : 'open' }}</p>
+      </template>
+      <template>
+        <p>Default content</p>
+      </template>
+    </BaseHeaderTogglePanel>
+
+    <h2>Base id toggle panel, Base id toggle panel button and Base Toggle panel</h2>
+    <BaseIdTogglePanelButton panelId="myToggle">Toggle Aside</BaseIdTogglePanelButton>
+    <BaseIdTogglePanel :startOpen="true" panelId="myToggle">
+      <div>My toggle</div>
+    </BaseIdTogglePanel>
+
+    <h2>Base tabs panel component</h2>
+    <BaseTabsPanel initial-tab="fall">
+      <template #summer>
+        <div>Summer Top Sales</div>
+      </template>
+
+      <template #fall>
+        <div>Fall Top Sales</div>
+      </template>
+
+      <template #outlet>
+        <div>Outlet Top Sales</div>
+      </template>
+    </BaseTabsPanel>
+  </div>
+</template>
+
+<script setup>
+  import BaseHeaderTogglePanel from '../../../../x-components/src/components/panels/base-header-toggle-panel.vue';
+  import BaseIdTogglePanelButton from '../../../../x-components/src/components/panels/base-id-toggle-panel-button.vue';
+  import BaseIdTogglePanel from '../../../../x-components/src/components/panels/base-id-toggle-panel.vue';
+  import BaseTabsPanel from '../../../../x-components/src/components/panels/base-tabs-panel.vue';
+</script>
+
+<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/components/test-base-keyboard-navigation.vue b/packages/_vue3-migration-test/src/components/test-base-keyboard-navigation.vue
new file mode 100644
index 0000000000..0f3ed3d068
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/test-base-keyboard-navigation.vue
@@ -0,0 +1,27 @@
+<template>
+  <SearchInput />
+  <BaseKeyboardNavigation>
+    <ul>
+      <li>
+        <button>First</button>
+      </li>
+      <li>
+        <button>Second</button>
+      </li>
+      <li>
+        <button>Third</button>
+      </li>
+    </ul>
+  </BaseKeyboardNavigation>
+</template>
+
+<script setup lang="ts">
+  import BaseKeyboardNavigation from '../../../x-components/src/components/base-keyboard-navigation.vue';
+  import SearchInput from '../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
+
+<style>
+  button:focus-visible {
+    border: 3px solid red;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 7d891e22bf..4617d5f5fa 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -25,6 +25,8 @@ import {
   TestBaseSuggestions,
   TestHighlight,
   TestBaseResultImages,
+  TestBasePanel,
+  TestBaseKeyboardNavigation,
   TestQuerySuggestions
 } from './';
 
@@ -154,6 +156,16 @@ const routes = [
     name: 'BaseResultImages',
     component: TestBaseResultImages
   },
+  {
+    path: '/test-base-panel',
+    name: 'TestBasePanel',
+    component: TestBasePanel
+  },
+  {
+    path: '/base-keyboard-navigation',
+    name: 'TestBaseKeyboardNavigation',
+    component: TestBaseKeyboardNavigation
+  },
   {
     path: '/query-suggestions',
     name: 'QuerySuggestions',
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index ee6796d7d3..c9027b2e2e 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.29](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.28...@empathyco/x-components@5.0.0-alpha.29) (2024-05-31)
+
+
+### Features
+
+* **keyboard-navigation:** migrate keyboard-navigation component to composition API (#1493) ([4cf31c9](https://github.com/empathyco/x/commit/4cf31c9df4b751514deaaef4c9abfe4ee5ddfc40))
+
+
+
+## [5.0.0-alpha.28](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.27...@empathyco/x-components@5.0.0-alpha.28) (2024-05-31)
+
+
+### Features
+
+* **panels:** migrate `base-panels` components to composition api (#1491) ([077ad4d](https://github.com/empathyco/x/commit/077ad4d1bcc1dcf0ae2e16a02f1ac073481a1892))
+* **result-images:** migrate result images components to composition API (#1496) ([624fb45](https://github.com/empathyco/x/commit/624fb459e71b3c0905e53ba70c1a3a15f581a0fc))
+
+
+
 ## [5.0.0-alpha.27](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.26...@empathyco/x-components@5.0.0-alpha.27) (2024-05-30)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index aa609b98c7..db9a4826da 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.27",
+  "version": "5.0.0-alpha.29",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
diff --git a/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts b/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts
index 079b156860..8f10cde4b1 100644
--- a/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-keyboard-navigation.spec.ts
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import { SearchInput } from '../../x-modules/search-box/components/index';
 import { installNewXPlugin } from '../../__tests__/utils';
 import BaseKeyboardNavigation from '../base-keyboard-navigation.vue';
+import { DirectionalFocusNavigationService } from '../../services/directional-focus-navigation.service';
 
 describe('testing keyboard navigation component', () => {
   let localVue: typeof Vue;
@@ -12,9 +13,12 @@ describe('testing keyboard navigation component', () => {
   });
 
   it('takes control of the navigation when a defined condition is triggered', () => {
-    const mockedFocusNextNavigableElement = jest.fn();
+    const navigateToSpy = jest.spyOn(
+      DirectionalFocusNavigationService.prototype as any,
+      'navigateTo'
+    );
     const searchInput = mount(SearchInput, { localVue });
-    const keyboardNavigation = mount(BaseKeyboardNavigation, {
+    mount(BaseKeyboardNavigation, {
       localVue,
       propsData: {
         navigationHijacker: [
@@ -26,26 +30,21 @@ describe('testing keyboard navigation component', () => {
         ]
       }
     });
-    Object.defineProperty(keyboardNavigation.vm, 'focusNextNavigableElement', {
-      value: mockedFocusNextNavigableElement
-    });
     searchInput.trigger('keydown', { key: 'ArrowUp' });
-    expect(mockedFocusNextNavigableElement).not.toHaveBeenCalled();
+    expect(navigateToSpy).not.toHaveBeenCalled();
 
     searchInput.trigger('keydown', { key: 'ArrowDown' });
-    expect(mockedFocusNextNavigableElement).toHaveBeenCalled();
+    expect(navigateToSpy).toHaveBeenCalled();
   });
 
   it('emits the defined event when reaching the limit in the direction of the navigation', () => {
     const listener = jest.fn();
-    const htmlElement = document.createElement('div');
+    // As cannot mock elementToFocus (it will be undefined), making the navigateTo method return undefined
+    jest
+      .spyOn(DirectionalFocusNavigationService.prototype as any, 'navigateTo')
+      .mockReturnValue(undefined);
     const keyboardNavigation = mount(BaseKeyboardNavigation, {
       localVue,
-      data() {
-        return {
-          elementToFocus: htmlElement
-        };
-      },
       propsData: {
         takeNavigationControl: [],
         eventsForDirectionLimit: {
@@ -53,9 +52,6 @@ describe('testing keyboard navigation component', () => {
         }
       }
     });
-    Object.defineProperty((keyboardNavigation.vm as any).navigationService, 'navigateTo', {
-      value: (): HTMLElement => htmlElement
-    });
     keyboardNavigation.vm.$x.on('UserReachedEmpathizeTop').subscribe(listener);
     keyboardNavigation.trigger('keydown', { key: 'ArrowUp' });
 
diff --git a/packages/x-components/src/components/base-keyboard-navigation.vue b/packages/x-components/src/components/base-keyboard-navigation.vue
index 5ecef210d1..e4bf015386 100644
--- a/packages/x-components/src/components/base-keyboard-navigation.vue
+++ b/packages/x-components/src/components/base-keyboard-navigation.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="el"
     @keydown.up.down.right.left.prevent="focusNextNavigableElement"
     class="x-keyboard-navigation"
     data-test="keyboard-navigation"
@@ -10,15 +11,14 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { PropType, computed, defineComponent, onMounted, ref } from 'vue';
   // eslint-disable-next-line max-len
   import { DirectionalFocusNavigationService } from '../services/directional-focus-navigation.service';
   import { SpatialNavigation } from '../services/services.types';
   import { ArrowKey, EventsForDirectionLimit, TakeNavigationControl } from '../utils/types';
   import { XEventsOf } from '../wiring/events.types';
   import { WireMetadata } from '../wiring/wiring.types';
-  import { XOn } from './decorators/bus.decorators';
+  import { use$x, useXBus } from '../composables';
 
   /**
    * Base component to handle keyboard navigation for elements inside it. It has a required slot to
@@ -32,116 +32,128 @@
    *
    * @public
    */
-  @Component
-  export default class BaseKeyboardNavigation extends Vue {
-    /**
-     * An array of {@link TakeNavigationControl} objects defining when to
-     * take control of the keyboard navigation.
-     */
-    @Prop({
-      default: () => [
-        { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }
-      ]
-    })
-    protected navigationHijacker!: TakeNavigationControl[];
-
-    /**
-     * An {@link EventsForDirectionLimit} to emit when the user is already at the furthest element
-     * in a direction and tries to keep going on the same direction.
-     */
-    @Prop({ default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' }) })
-    protected eventsForDirectionLimit!: Partial<EventsForDirectionLimit>;
-
-    /**
-     * The {@link SpatialNavigation} service to use.
-     */
-    protected navigationService!: SpatialNavigation;
-
-    /**
-     * The element to focus.
-     */
-    protected elementToFocus: HTMLElement | undefined;
-
-    mounted(): void {
-      // TODO Replace this with injection
-      this.navigationService = new DirectionalFocusNavigationService(this.$el as HTMLElement);
-    }
-
-    /**
-     * Get the navigation hijacker events.
-     *
-     * @remarks
-     * If the same {@link XEvent} is defined multiple times it is only inserted once.
-     *
-     * @returns The events to hijack the navigation.
-     */
-    protected get navigationHijackerEvents(): XEventsOf<ArrowKey>[] {
-      const eventsSet = this.navigationHijacker.map(({ xEvent }) => xEvent);
-      return Array.from(new Set(eventsSet));
-    }
-
-    /**
-     * Trigger navigation if this component is in control of it.
-     *
-     * @param eventPayload - The {@link @empathyco/x-bus#SubjectPayload.eventPayload}.
-     * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.
-     * @public
-     */
-    @XOn(component => (component as BaseKeyboardNavigation).navigationHijackerEvents)
-    triggerNavigation(eventPayload: ArrowKey, metadata: WireMetadata): void {
-      if (this.hasToTakeNavigationControl(eventPayload, metadata)) {
-        this.focusNextNavigableElement(eventPayload);
+  export default defineComponent({
+    name: 'BaseKeyboardNavigation',
+    props: {
+      /**
+       * An array of {@link TakeNavigationControl} objects defining when to
+       * take control of the keyboard navigation.
+       */
+      navigationHijacker: {
+        type: Array as PropType<TakeNavigationControl[]>,
+        default: () => [
+          { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }
+        ]
+      },
+      /**
+       * An {@link EventsForDirectionLimit} to emit when the user is already at the furthest element
+       * in a direction and tries to keep going on the same direction.
+       */
+      eventsForDirectionLimit: {
+        type: Object as PropType<Partial<EventsForDirectionLimit>>,
+        default: () => ({ ArrowUp: 'UserReachedEmpathizeTop' })
+      }
+    },
+    setup: function (props) {
+      const el = ref<HTMLElement>();
+
+      const $x = use$x();
+      const xBus = useXBus();
+
+      /**
+       * The {@link SpatialNavigation} service to use.
+       */
+      let navigationService!: SpatialNavigation;
+
+      /**
+       * The element to focus.
+       */
+      let elementToFocus: HTMLElement | undefined;
+
+      /**
+       * Get the navigation hijacker events.
+       *
+       * @remarks
+       * If the same {@link XEvent} is defined multiple times it is only inserted once.
+       *
+       * @returns The events to hijack the navigation.
+       */
+      const navigationHijackerEvents = computed((): XEventsOf<ArrowKey>[] => {
+        const eventsSet = props.navigationHijacker.map(({ xEvent }) => xEvent);
+        return Array.from(new Set(eventsSet));
+      });
+
+      onMounted(() => {
+        // TODO Replace this with injection
+        navigationService = new DirectionalFocusNavigationService(el.value!);
+      });
+
+      /**
+       * Checks if the component has to take control of the keyboard navigation.
+       *
+       * @param eventPayload - The {@link ArrowKey}.
+       * @param metadata - The {@link WireMetadata}.
+       *
+       * @returns Whether the component needs to take control of the keyboard navigation or not.
+       * @internal
+       */
+      function hasToTakeNavigationControl(eventPayload: ArrowKey, metadata: WireMetadata): boolean {
+        return props.navigationHijacker.some(
+          ({ moduleName, direction }) =>
+            moduleName === metadata.moduleName && direction === eventPayload
+        );
       }
-    }
-
-    /**
-     * Checks if the component has to take control of the keyboard navigation.
-     *
-     * @param eventPayload - The {@link ArrowKey}.
-     * @param metadata - The {@link WireMetadata}.
-     *
-     * @returns Whether the component needs to take control of the keyboard navigation or not.
-     * @internal
-     */
-    private hasToTakeNavigationControl(eventPayload: ArrowKey, metadata: WireMetadata): boolean {
-      return this.navigationHijacker.some(
-        ({ moduleName, direction }) =>
-          moduleName === metadata.moduleName && direction === eventPayload
-      );
-    }
 
-    /**
-     * Focus the next navigable element returned by the navigation service.
-     *
-     * @param direction - The navigation direction.
-     * @internal
-     */
-    protected focusNextNavigableElement(direction: ArrowKey | KeyboardEvent): void {
-      const dir = typeof direction === 'object' ? (direction.key as ArrowKey) : direction;
-      const nextElementToFocus = this.navigationService?.navigateTo(dir);
-
-      if (this.elementToFocus !== nextElementToFocus) {
-        this.elementToFocus = nextElementToFocus;
-        this.elementToFocus.focus();
-      } else {
-        this.emitDirectionalLimitReached(dir);
-        this.elementToFocus = undefined;
+      /**
+       * Focus the next navigable element returned by the navigation service.
+       *
+       * @param direction - The navigation direction.
+       * @internal
+       */
+      function focusNextNavigableElement(direction: ArrowKey | KeyboardEvent): void {
+        const dir = typeof direction === 'object' ? (direction.key as ArrowKey) : direction;
+        const nextElementToFocus = navigationService?.navigateTo(dir);
+
+        if (elementToFocus !== nextElementToFocus) {
+          elementToFocus = nextElementToFocus;
+          elementToFocus.focus();
+        } else {
+          emitDirectionalLimitReached(dir);
+          elementToFocus = undefined;
+        }
       }
-    }
 
-    /**
-     * Emit the {@link XEvent} associated to the navigation's direction when reaching its limit.
-     *
-     * @param direction - The navigation direction.
-     * @internal
-     */
-    private emitDirectionalLimitReached(direction: ArrowKey): void {
-      const xEvent = this.eventsForDirectionLimit?.[direction];
-      if (xEvent) {
-        this.$x.emit(xEvent, undefined, { target: this.elementToFocus });
+      /**
+       * Emit the {@link XEvent} associated to the navigation's direction when reaching its limit.
+       *
+       * @param direction - The navigation direction.
+       * @internal
+       */
+      function emitDirectionalLimitReached(direction: ArrowKey): void {
+        const xEvent = props.eventsForDirectionLimit?.[direction];
+        if (xEvent) {
+          $x.emit(xEvent, undefined, { target: elementToFocus });
+        }
       }
+
+      /**
+       * Trigger navigation if this component is in control of it.
+       *
+       * @param eventPayload - The {@link @empathyco/x-bus#SubjectPayload.eventPayload}.
+       * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.
+       * @public
+       */
+      navigationHijackerEvents.value.forEach(event => {
+        xBus.on(event, true).subscribe(({ eventPayload, metadata }) => {
+          if (hasToTakeNavigationControl(eventPayload, metadata)) {
+            focusNextNavigableElement(eventPayload);
+          }
+        });
+      });
+
+      return { el, focusNextNavigableElement };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts b/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts
index df08f9863b..3bdff9e84b 100644
--- a/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts
@@ -1,7 +1,7 @@
 import { mount, Wrapper } from '@vue/test-utils';
 import Vue from 'vue';
 import { getDataTestSelector } from '../../../__tests__/utils';
-import BaseHeaderTogglePanelComponent from '../base-header-toggle-panel.vue';
+import BaseHeaderTogglePanel from '../base-header-toggle-panel.vue';
 
 /**
  * Function that returns a BaseHeaderTogglePanel wrapper. The animation prop is not gonna be tested
@@ -16,12 +16,12 @@ function renderBaseHeaderTogglePanel({
 }: RenderBaseTogglePanelOptions = {}): RenderBaseHeaderTogglePanelAPI {
   const wrapperContainer = mount({
     components: {
-      BaseHeaderTogglePanel: BaseHeaderTogglePanelComponent
+      BaseHeaderTogglePanel
     },
     template
   });
 
-  const wrapper = wrapperContainer.findComponent(BaseHeaderTogglePanelComponent);
+  const wrapper = wrapperContainer.findComponent(BaseHeaderTogglePanel);
   const headerWrapper = wrapper.find(getDataTestSelector('toggle-panel-header'));
 
   return {
@@ -62,6 +62,7 @@ describe('testing BaseHeaderTogglePanel component', () => {
 
   it('emits its open status as an event on header click', async () => {
     const { wrapper, toggleOpen } = renderBaseHeaderTogglePanel();
+
     await toggleOpen();
     expect(wrapper.emitted().close).toHaveLength(1);
     await toggleOpen();
diff --git a/packages/x-components/src/components/panels/base-header-toggle-panel.vue b/packages/x-components/src/components/panels/base-header-toggle-panel.vue
index 54c63b618f..add00425f4 100644
--- a/packages/x-components/src/components/panels/base-header-toggle-panel.vue
+++ b/packages/x-components/src/components/panels/base-header-toggle-panel.vue
@@ -22,11 +22,9 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { defineComponent, ref } from 'vue';
   import { AnimationProp } from '../../types/animation-prop';
   import { NoElement } from '../no-element';
-  import { dynamicPropsMixin } from '../dynamic-props.mixin';
   import BaseTogglePanel from './base-toggle-panel.vue';
 
   /**
@@ -35,49 +33,58 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'BaseHeaderTogglePanel',
     components: { BaseTogglePanel },
-    mixins: [dynamicPropsMixin(['headerClass'])]
-  })
-  export default class BaseHeaderTogglePanel extends Vue {
-    /**
-     * Animation component that will be used to animate the base-toggle-panel.
-     *
-     * @public
-     */
-    @Prop({ default: () => NoElement })
-    protected animation!: typeof AnimationProp;
-    /**
-     * Handles if the panel is open by default.
-     *
-     * @public
-     */
-    @Prop({ default: false })
-    protected startCollapsed!: boolean;
-    /**
-     * Handles if the base panel is open or closed.
-     *
-     * @internal
-     */
-    protected open = !this.startCollapsed;
-    /**
-     * Toggles the open property.
-     *
-     * @internal
-     */
-    protected toggleOpen(): void {
-      this.open = !this.open;
-      this.emitOpenStatusEvent();
+    props: {
+      /**
+       * Animation component that will be used to animate the base-toggle-panel.
+       *
+       * @public
+       */
+      animation: { type: AnimationProp, default: () => NoElement },
+      /**
+       * Handles if the panel is open by default.
+       *
+       * @public
+       */
+      startCollapsed: { type: Boolean, default: false },
+      /** Class inherited by content element. */
+      headerClass: String
+    },
+    setup: function (props, { emit }) {
+      /**
+       * Handles if the base panel is open or closed.
+       *
+       * @internal
+       */
+      const open = ref(!props.startCollapsed);
+
+      /**
+       * Emits open status event.
+       *
+       * @internal
+       */
+      const emitOpenStatusEvent = () => {
+        emit(open.value ? 'open' : 'close');
+      };
+
+      /**
+       * Toggles the open property.
+       *
+       * @internal
+       */
+      const toggleOpen = () => {
+        open.value = !open.value;
+        emitOpenStatusEvent();
+      };
+
+      return {
+        open,
+        toggleOpen
+      };
     }
-    /**
-     * Emits open status event.
-     *
-     * @internal
-     */
-    protected emitOpenStatusEvent(): void {
-      this.$emit(this.open ? 'open' : 'close');
-    }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue b/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
index 29d654c71a..a549219f0f 100644
--- a/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
+++ b/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
@@ -12,12 +12,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { defineComponent, ref, computed } from 'vue';
   import { XEventsTypes } from '../../wiring/events.types';
   import { WireMetadata } from '../../wiring/wiring.types';
   import BaseEventButton from '../base-event-button.vue';
-  import { XOn } from '../decorators/bus.decorators';
+  import { useXBus } from '../../composables';
 
   /**
    * Component containing an event button that emits
@@ -28,44 +27,60 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton }
-  })
-  export default class BaseIdTogglePanelButton extends Vue {
-    /**
-     * The panel state to pass through the slot.
-     */
-    protected isPanelOpen = false;
-
-    /** The panelId to use for the toggle event listeners. */
-    @Prop({ required: true })
-    protected panelId!: string;
-
-    /**
-     * List of events to emit by the BaseEventButton.
-     *
-     * @returns An object with the event and payload.
-     *
-     * @internal
-     */
-    protected get events(): Partial<XEventsTypes> {
-      return { UserClickedPanelToggleButton: this.panelId };
-    }
-
-    /**
-     * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event
-     * to update the `isPanelOpen` property.
-     *
-     * @param newState - The new isOpen state of the panel.
-     * @param id - The `panelId`.
-     */
-    @XOn('TogglePanelStateChanged')
-    updatePanelState(newState: boolean, { id }: WireMetadata): void {
-      if (this.panelId === id) {
-        this.isPanelOpen = newState;
+  export default defineComponent({
+    name: 'BaseIdTogglePanelButton',
+    components: { BaseEventButton },
+    props: {
+      /**
+       * The panelId to use for the toggle event listeners.
+       */
+      panelId: {
+        type: String,
+        required: true
       }
+    },
+    setup: function (props) {
+      const bus = useXBus();
+
+      /**
+       * The panel state to pass through the slot.
+       */
+      const isPanelOpen = ref(false);
+
+      /**
+       * List of events to emit by the BaseEventButton.
+       *
+       * @returns An object with the event and payload.
+       *
+       * @internal
+       */
+      const events = computed(
+        (): Partial<XEventsTypes> => ({ UserClickedPanelToggleButton: props.panelId })
+      );
+
+      /**
+       * The subscription to the {@link XEventsTypes.TogglePanelStateChanged} event
+       * to update the `isPanelOpen` property.
+       *
+       * @param newState - The new isOpen state of the panel.
+       * @param id - The `panelId`.
+       */
+      const updatePanelState = (newState: boolean, { id }: WireMetadata) => {
+        if (props.panelId === id) {
+          isPanelOpen.value = newState;
+        }
+      };
+
+      bus
+        .on('TogglePanelStateChanged', false)
+        .subscribe(newState => updatePanelState(newState, { id: props.panelId, moduleName: null }));
+
+      return {
+        isPanelOpen,
+        events
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/components/panels/base-id-toggle-panel.vue b/packages/x-components/src/components/panels/base-id-toggle-panel.vue
index 92aa379ca2..18b089cf34 100644
--- a/packages/x-components/src/components/panels/base-id-toggle-panel.vue
+++ b/packages/x-components/src/components/panels/base-id-toggle-panel.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import { XOn } from '../decorators/bus.decorators';
+  import { defineComponent, ref, watch } from 'vue';
   import { NoElement } from '../no-element';
+  import { AnimationProp } from '../../types';
+  import { use$x } from '../../composables';
   import BaseTogglePanel from './base-toggle-panel.vue';
 
   /**
@@ -24,68 +24,82 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'BaseIdTogglePanel',
     components: {
       BaseTogglePanel
-    }
-  })
-  export default class BaseIdTogglePanel extends Vue {
-    /**
-     * Shows the panel open at the beginning or not, depending on its state.
-     *
-     * @public
-     */
-    @Prop({ default: true })
-    protected startOpen!: boolean;
-
-    /** Whether the toggle panel is open or not. */
-    protected isOpen = this.startOpen;
-
-    /**
-     * Animation component that will be used to animate the panel content.
-     *
-     * @public
-     */
-    @Prop({ default: () => NoElement })
-    protected animation!: Vue;
-
-    /**
-     * The id to link with the BaseIdTogglePanelButton.
-     * Both components must use the same Id to make them interact.
-     */
-    @Prop({ required: true })
-    public panelId!: string;
-
-    /**
-     * Method to subscribe to the {@link XEventsTypes.UserClickedPanelToggleButton} event.
-     *
-     * @param panelId - The payload of the {@link XEventsTypes.UserClickedPanelToggleButton} event.
-     *
-     * @public
-     */
-    @XOn('UserClickedPanelToggleButton')
-    togglePanel(panelId: string): void {
-      if (this.panelId === panelId) {
-        this.isOpen = !this.isOpen;
+    },
+    props: {
+      /**
+       * Shows the panel open at the beginning or not, depending on its state.
+       *
+       * @public
+       */
+      startOpen: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * Animation component that will be used to animate the panel content.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: () => NoElement
+      },
+      /**
+       * The id to link with the BaseIdTogglePanelButton.
+       * Both components must use the same Id to make them interact.
+       */
+      panelId: {
+        type: String,
+        required: true
       }
-    }
+    },
+    setup: function (props) {
+      const $x = use$x();
+
+      /** Whether the toggle panel is open or not. */
+      const isOpen = ref(props.startOpen);
+
+      /**
+       * Method to subscribe to the {@link XEventsTypes.UserClickedPanelToggleButton} event.
+       *
+       * @param panelId - The payload of the {@link XEventsTypes.UserClickedPanelToggleButton} event.
+       *
+       * @public
+       */
+      const togglePanel = (panelId: string) => {
+        if (props.panelId === panelId) {
+          isOpen.value = !isOpen.value;
+        }
+      };
 
-    /**
-     * Emits the {@link XEventsTypes.TogglePanelStateChanged} event, when the internal state
-     * changes.
-     *
-     * @remarks This event is necessary to link the state with the {@link BaseIdTogglePanelButton}
-     * component.
-     * @public
-     */
-    @Watch('isOpen', { immediate: true })
-    emitStateEvent(): void {
-      this.$x.emit('TogglePanelStateChanged', this.isOpen, {
-        id: this.panelId,
-        target: this.$el as HTMLElement
-      });
+      $x.on('UserClickedPanelToggleButton', false).subscribe(togglePanel);
+
+      /**
+       * Emits the {@link XEventsTypes.TogglePanelStateChanged} event, when the internal state
+       * changes.
+       *
+       * @remarks This event is necessary to link the state with the {@link BaseIdTogglePanelButton}
+       * component.
+       * @public
+       */
+      watch(
+        () => isOpen.value,
+        () => {
+          $x.emit('TogglePanelStateChanged', isOpen.value, {
+            id: props.panelId,
+            target: document.getElementById(props.panelId) as HTMLElement
+          });
+        },
+        { immediate: true }
+      );
+
+      return { isOpen };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/components/panels/base-tabs-panel.vue b/packages/x-components/src/components/panels/base-tabs-panel.vue
index fe7ab25315..9379c435ba 100644
--- a/packages/x-components/src/components/panels/base-tabs-panel.vue
+++ b/packages/x-components/src/components/panels/base-tabs-panel.vue
@@ -42,7 +42,7 @@
 
     <component :is="contentAnimation">
       <div
-        v-if="selectedTab && $scopedSlots[selectedTab]"
+        v-if="selectedTab && slots[selectedTab]"
         :key="selectedTab"
         :class="contentClass"
         :aria-labelledby="`base-tabs-panel-${selectedTab}`"
@@ -65,101 +65,116 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { defineComponent, ref } from 'vue';
   import { NoElement } from '../no-element';
-  import { dynamicPropsMixin } from '../dynamic-props.mixin';
+  import { AnimationProp } from '../../types';
 
   /**
    * Base Tabs Panel.
    *
    * @public
    */
-  @Component
-  export default class BaseTabsPanel extends mixins(
-    dynamicPropsMixin(['activeTabClass', 'contentClass', 'tabClass', 'tabsListClass'])
-  ) {
-    /**
-     * Animation component that will be used to animate the tabs list.
-     *
-     * @public
-     */
-    @Prop({ default: 'header' })
-    public tabsAnimation!: Vue | string;
-
-    /**
-     * Animation component that will be used to animate the selected tab content.
-     *
-     * @public
-     */
-    @Prop({ default: () => NoElement })
-    public contentAnimation!: Vue | string;
-
-    /**
-     * The tab to be initially selected.
-     *
-     * @public
-     */
-    @Prop({ default: '' })
-    public initialTab!: string;
-
-    /**
-     * Allows the tabs to be unselected.
-     *
-     * @public
-     */
-    @Prop({ default: false, type: Boolean })
-    public allowTabDeselect!: boolean;
-
-    /**
-     * The currently selected tab.
-     *
-     * @internal
-     */
-    protected selectedTab: string = this.initialTab;
-
-    /**
-     * Extracts the tab from the slots.
-     *
-     * @returns The list of tabs.
-     *
-     * @internal
-     */
-    protected getTabs(): string[] {
-      return Object.keys(this.$scopedSlots).filter(
-        slotName => !['tab', 'tab-content'].includes(slotName)
-      );
-    }
+  export default defineComponent({
+    name: 'BaseTabsPanel',
+    props: {
+      /**
+       * Animation component that will be used to animate the tabs list.
+       *
+       * @public
+       */
+      tabsAnimation: {
+        type: AnimationProp,
+        default: 'header'
+      },
+      /**
+       * Animation component that will be used to animate the selected tab content.
+       *
+       * @public
+       */
+      contentAnimation: {
+        type: AnimationProp,
+        default: () => NoElement
+      },
+      /**
+       * The tab to be initially selected.
+       *
+       * @public
+       */
+      initialTab: {
+        type: String,
+        default: ''
+      },
+      /**
+       * Allows the tabs to be unselected.
+       *
+       * @public
+       */
+      allowTabDeselect: {
+        type: Boolean,
+        default: false
+      },
+      /** Class inherited by content element. */
+      activeTabClass: String,
+      /** Class inherited by content element. */
+      contentClass: String,
+      /** Class inherited by content element. */
+      tabClass: String,
+      /** Class inherited by content element. */
+      tabsListClass: String
+    },
+    setup: function (props, { slots }) {
+      /**
+       * The currently selected tab.
+       *
+       * @internal
+       */
+      const selectedTab = ref(props.initialTab);
+
+      /**
+       * Extracts the tab from the slots.
+       *
+       * @returns The list of tabs.
+       *
+       * @internal
+       */
+      const getTabs = () =>
+        Object.keys(slots).filter(slotName => !['tab', 'tab-content'].includes(slotName));
+
+      /**
+       * Changes the current selected tab. If the tab is already selected
+       * and `allowTabDeselect` is `true`, the tab will be unselected.
+       *
+       * @param tab - The tab to be selected.
+       *
+       * @internal
+       */
+      const selectTab = (tab: string) => {
+        if (props.allowTabDeselect && selectedTab.value === tab) {
+          selectedTab.value = '';
+        } else {
+          selectedTab.value = tab;
+        }
+      };
 
-    /**
-     * Changes the current selected tab. If the tab is already selected
-     * and `allowTabDeselect` is `true`, the tab will be unselected.
-     *
-     * @param tab - The tab to be selected.
-     *
-     * @internal
-     */
-    protected selectTab(tab: string): void {
-      if (this.allowTabDeselect && this.selectedTab === tab) {
-        this.selectedTab = '';
-      } else {
-        this.selectedTab = tab;
-      }
-    }
+      /**
+       * Checks if a tab is selected.
+       *
+       * @param tab - Tab to check.
+       * @returns True if the tab is selected, false otherwise.
+       *
+       * @internal
+       */
+      const tabIsSelected = (tab: string) => selectedTab.value === tab;
 
-    /**
-     * Checks if a tab is selected.
-     *
-     * @param tab - Tab to check.
-     * @returns True if the tab is selected, false otherwise.
-     *
-     * @internal
-     */
-    protected tabIsSelected(tab: string): boolean {
-      return this.selectedTab === tab;
+      return {
+        selectedTab,
+        slots,
+        getTabs,
+        selectTab,
+        tabIsSelected
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>