diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 5ee75b14a3..9bc8c5951e 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -10,3 +10,4 @@ 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';
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/router.ts b/packages/_vue3-migration-test/src/router.ts
index 89dff78109..b379899eae 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -24,7 +24,8 @@ import {
   TestSlidingPanel,
   TestBaseSuggestions,
   TestHighlight,
-  TestBaseResultImages
+  TestBaseResultImages,
+  TestBasePanel
 } from './';
 
 const routes = [
@@ -152,6 +153,11 @@ const routes = [
     path: '/base-result-images',
     name: 'BaseResultImages',
     component: TestBaseResultImages
+  },
+  {
+    path: '/test-base-panel',
+    name: 'TestBasePanel',
+    component: TestBasePanel
   }
 ];
 
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>