diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index c8a2c45f80..f03d8da35b 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -17,7 +17,7 @@ import {
   TestSortDropdown,
   TestSortList,
   TestSortPickerList,
-  TestBaseScroll,
+  TestMainScroll,
   TestBaseModal,
   TestSearchBox,
   TestBaseVariableColumnGrid,
@@ -134,9 +134,9 @@ const routes = [
     component: TestScroll
   },
   {
-    path: '/base-scroll',
-    name: 'BaseScroll',
-    component: TestBaseScroll
+    path: '/main-scroll',
+    name: 'MainScroll',
+    component: TestMainScroll
   },
   {
     path: '/sort-dropdown',
diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/index.ts b/packages/_vue3-migration-test/src/x-modules/scroll/index.ts
index 297de40eef..de59a44609 100644
--- a/packages/_vue3-migration-test/src/x-modules/scroll/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/index.ts
@@ -1,3 +1,3 @@
+export { default as TestMainScroll } from './test-main-scroll.vue';
 export { default as TestScroll } from './test-scroll.vue';
-export { default as TestBaseScroll } from './test-base-scroll.vue';
 export * from './x-module';
diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/test-base-scroll.vue b/packages/_vue3-migration-test/src/x-modules/scroll/test-base-scroll.vue
deleted file mode 100644
index 09fa7c56f6..0000000000
--- a/packages/_vue3-migration-test/src/x-modules/scroll/test-base-scroll.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <BaseScroll
-    @scroll="onScroll"
-    @scroll:direction-change="onScrollDirectionChange"
-    @scroll:at-start="onScrollAtStart"
-    @scroll:almost-at-end="onScrollAlmostAtEnd"
-    @scroll:at-end="onScrollAtEnd"
-  >
-    <ul>
-      <li v-for="item in items" :key="item.id">base-scroll-{{ item.id }}</li>
-    </ul>
-  </BaseScroll>
-  <table>
-    <tr>
-      <td>Position</td>
-      <td>Direction</td>
-      <td>At start</td>
-      <td>Almost at end</td>
-      <td>At end</td>
-    </tr>
-    <tr style="font-weight: bold">
-      <td>{{ scroll }}</td>
-      <td>{{ scrollDirection }}</td>
-      <td>{{ isScrollAtStart }}</td>
-      <td>{{ isScrollAlmostAtEnd }}</td>
-      <td>{{ isScrollAtEnd }}</td>
-    </tr>
-  </table>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import BaseScroll from '../../../../x-components/src/components/scroll/base-scroll.vue';
-  import { ScrollDirection } from '../../../../x-components/src/components/scroll/scroll.types';
-
-  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
-  const scroll = ref(0);
-  const scrollDirection = ref<ScrollDirection>('UP');
-  const isScrollAtStart = ref(false);
-  const isScrollAlmostAtEnd = ref(false);
-  const isScrollAtEnd = ref(false);
-
-  const onScroll = (pos: number) => (scroll.value = pos);
-  const onScrollDirectionChange = (dir: ScrollDirection) => (scrollDirection.value = dir);
-  const onScrollAtStart = (is: boolean) => (isScrollAtStart.value = is);
-  const onScrollAlmostAtEnd = (is: boolean) => (isScrollAlmostAtEnd.value = is);
-  const onScrollAtEnd = (is: boolean) => (isScrollAtEnd.value = is);
-</script>
-
-<style>
-  /* Inheritance of `design-system-deprecated` */
-  .x-base-scroll {
-    overflow: auto;
-    height: 100px;
-  }
-</style>
diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/test-main-scroll.vue b/packages/_vue3-migration-test/src/x-modules/scroll/test-main-scroll.vue
new file mode 100644
index 0000000000..8f74707be1
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/test-main-scroll.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
+  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
+  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
+</script>
+
+<template>
+  <MainScroll>
+    <ul class="list" data-test="scroll">
+      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
+        {{ item.id }}
+      </MainScrollItem>
+    </ul>
+  </MainScroll>
+</template>
+
+<style scoped lang="scss">
+  .list {
+    overflow: auto;
+    height: 100px;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
index b74c6c5d96..29650300c9 100644
--- a/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
@@ -1,43 +1,60 @@
 <template>
-  <MainScroll class="CUSTOM-CLASS" data-custom="CUSTOM-DATA-ATTR">
-    <ul class="list" data-test="scroll">
-      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
-        {{ item.id }}
-      </MainScrollItem>
+  <Scroll
+    @scroll="onScroll"
+    @scroll:direction-change="onScrollDirectionChange"
+    @scroll:at-start="onScrollAtStart"
+    @scroll:almost-at-end="onScrollAlmostAtEnd"
+    @scroll:at-end="onScrollAtEnd"
+    id="main-scroll"
+  >
+    <ul>
+      <li v-for="item in items" :key="item.id">base-scroll-{{ item.id }}</li>
     </ul>
-  </MainScroll>
-  <MainScroll>
-    <ul class="list" data-test="scroll">
-      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
-        {{ item.id }}
-      </MainScrollItem>
-    </ul>
-  </MainScroll>
+  </Scroll>
+  <ScrollToTop :threshold-px="100" class="x-button--round" scroll-id="main-scroll">
+    <span>Top</span>
+  </ScrollToTop>
+  <table>
+    <tr>
+      <td>Position</td>
+      <td>Direction</td>
+      <td>At start</td>
+      <td>Almost at end</td>
+      <td>At end</td>
+    </tr>
+    <tr style="font-weight: bold">
+      <td>{{ scroll }}</td>
+      <td>{{ scrollDirection }}</td>
+      <td>{{ isScrollAtStart }}</td>
+      <td>{{ isScrollAlmostAtEnd }}</td>
+      <td>{{ isScrollAtEnd }}</td>
+    </tr>
+  </table>
 </template>
 
 <script setup lang="ts">
-  import { useXBus } from '../../../../x-components/src/composables/use-x-bus';
-  import { XEvent } from '../../../../x-components/src/wiring/events.types';
-  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
-  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
-
-  const xBus = useXBus();
+  import { ref } from 'vue';
+  import Scroll from '../../../../x-components/src/x-modules/scroll/components/scroll.vue';
+  import { ScrollDirection } from '../../../../x-components/src/components/scroll/scroll.types';
+  import ScrollToTop from '../../../../x-components/src/x-modules/scroll/components/scroll-to-top.vue';
 
   const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
-  const events: XEvent[] = [
-    'UserScrolledToElement',
-    'ScrollRestoreSucceeded',
-    'ScrollRestoreFailed'
-  ];
+  const scroll = ref(0);
+  const scrollDirection = ref<ScrollDirection>('UP');
+  const isScrollAtStart = ref(false);
+  const isScrollAlmostAtEnd = ref(false);
+  const isScrollAtEnd = ref(false);
 
-  events.forEach(event => {
-    // eslint-disable-next-line no-console
-    xBus.on(event, true).subscribe(args => console.log(`${event} event ->`, args));
-  });
+  const onScroll = (pos: number) => (scroll.value = pos);
+  const onScrollDirectionChange = (dir: ScrollDirection) => (scrollDirection.value = dir);
+  const onScrollAtStart = (is: boolean) => (isScrollAtStart.value = is);
+  const onScrollAlmostAtEnd = (is: boolean) => (isScrollAlmostAtEnd.value = is);
+  const onScrollAtEnd = (is: boolean) => (isScrollAtEnd.value = is);
 </script>
 
-<style scoped lang="scss">
-  .list {
+<style>
+  /* Inheritance of `design-system-deprecated` */
+  .x-base-scroll {
     overflow: auto;
     height: 100px;
   }
diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
index a6c20def62..18737d8819 100644
--- a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
+++ b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
@@ -86,7 +86,8 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, ref } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import Vue, { computed, defineComponent, ref } from 'vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import BaseIdModal from '../modals/base-id-modal.vue';
diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
index 5a45de9992..d8e2e08f9c 100644
--- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
+++ b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
@@ -92,7 +92,8 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import Vue, { defineComponent } from 'vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import AnimateWidth from '../animations/animate-width.vue';
diff --git a/packages/x-components/src/components/layouts/single-column-layout.vue b/packages/x-components/src/components/layouts/single-column-layout.vue
index 0b0884760c..b974f7dbf6 100644
--- a/packages/x-components/src/components/layouts/single-column-layout.vue
+++ b/packages/x-components/src/components/layouts/single-column-layout.vue
@@ -74,7 +74,8 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import Vue, { defineComponent } from 'vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
diff --git a/packages/x-components/src/x-modules/scroll/components/__tests__/scroll.spec.ts b/packages/x-components/src/x-modules/scroll/components/__tests__/scroll.spec.ts
index c2e2e39418..7490beed91 100644
--- a/packages/x-components/src/x-modules/scroll/components/__tests__/scroll.spec.ts
+++ b/packages/x-components/src/x-modules/scroll/components/__tests__/scroll.spec.ts
@@ -1,8 +1,10 @@
 import { mount, Wrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { WireMetadata } from '../../../../wiring/wiring.types';
 import { scrollXModule } from '../../x-module';
 import Scroll from '../scroll.vue';
+import { XPlugin } from '../../../../plugins/index';
 
 async function renderScroll({
   template = '<Scroll :throttleMs="throttleMs" :id="id"/>',
@@ -40,7 +42,7 @@ async function renderScroll({
 
   /* Because the scroll mixins uses a $nextTick in the mounted hook, we have to add a wait here
   so it has really finish mounting */
-  await wrapper.vm.$nextTick();
+  await nextTick();
 
   return {
     wrapper,
@@ -49,7 +51,7 @@ async function renderScroll({
       scrollElement.scrollTop = to;
       wrapper.trigger('scroll');
       jest.advanceTimersByTime(durationMs);
-      await wrapper.vm.$nextTick();
+      await nextTick();
     }
   };
 }
@@ -74,13 +76,13 @@ describe('testing Scroll Component', () => {
   });
 
   it('throttles the scroll event', async () => {
-    const { wrapper, scroll, scrollElement } = await renderScroll({
+    const { scroll, scrollElement } = await renderScroll({
       throttleMs: 200,
       id: 'main-scroll'
     });
 
     const listenerScrolled = jest.fn();
-    wrapper.vm.$x.on('UserScrolled', true).subscribe(listenerScrolled);
+    XPlugin.bus.on('UserScrolled', true).subscribe(listenerScrolled);
     expect(listenerScrolled).not.toHaveBeenCalled();
 
     await scroll({
@@ -112,13 +114,13 @@ describe('testing Scroll Component', () => {
 
   // eslint-disable-next-line max-len
   it('emits the `UserChangedScrollDirection` event when the user changes scrolling direction', async () => {
-    const { wrapper, scroll, scrollElement } = await renderScroll({
+    const { scroll, scrollElement } = await renderScroll({
       throttleMs: 200,
       id: 'main-scroll'
     });
 
     const listenerChangeDirection = jest.fn();
-    wrapper.vm.$x.on('UserChangedScrollDirection', true).subscribe(listenerChangeDirection);
+    XPlugin.bus.on('UserChangedScrollDirection', true).subscribe(listenerChangeDirection);
     expect(listenerChangeDirection).toHaveBeenCalledTimes(0);
 
     await scroll({
@@ -161,13 +163,13 @@ describe('testing Scroll Component', () => {
   });
 
   it('emits the `UserReachedScrollStart` event when the user scrolls back to the top', async () => {
-    const { wrapper, scroll, scrollElement } = await renderScroll({
+    const { scroll, scrollElement } = await renderScroll({
       throttleMs: 200,
       id: 'main-scroll'
     });
 
     const listenerScrollStart = jest.fn();
-    wrapper.vm.$x.on('UserReachedScrollStart', true).subscribe(listenerScrollStart);
+    XPlugin.bus.on('UserReachedScrollStart', true).subscribe(listenerScrollStart);
     expect(listenerScrollStart).toHaveBeenCalledTimes(0);
 
     await scroll({
@@ -201,7 +203,7 @@ describe('testing Scroll Component', () => {
 
   // eslint-disable-next-line max-len
   it('emits `UserAlmostReachedScrollEnd` and`UserReachedScrollEnd` when the user scrolls to the bottom', async () => {
-    const { wrapper, scroll, scrollElement } = await renderScroll({
+    const { scroll, scrollElement } = await renderScroll({
       throttleMs: 200,
       id: 'main-scroll',
       scrollHeight: 800,
@@ -210,9 +212,9 @@ describe('testing Scroll Component', () => {
     });
 
     const listenerAlmostReachedScrollEnd = jest.fn();
-    wrapper.vm.$x.on('UserAlmostReachedScrollEnd', true).subscribe(listenerAlmostReachedScrollEnd);
+    XPlugin.bus.on('UserAlmostReachedScrollEnd', true).subscribe(listenerAlmostReachedScrollEnd);
     const listenerReachedScrollEnd = jest.fn();
-    wrapper.vm.$x.on('UserReachedScrollEnd', true).subscribe(listenerReachedScrollEnd);
+    XPlugin.bus.on('UserReachedScrollEnd', true).subscribe(listenerReachedScrollEnd);
 
     await scroll({
       to: 501,
diff --git a/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue b/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
index b70800c549..623c91ae7e 100644
--- a/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
+++ b/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
@@ -15,15 +15,13 @@
 </template>
 
 <script lang="ts">
-  import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { State, xComponentMixin } from '../../../components';
+  import { computed, defineComponent } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
   import { NoElement } from '../../../components/no-element';
   import { XEventsTypes } from '../../../wiring';
-  import { ScrollComponentState } from '../store';
   import { scrollXModule } from '../x-module';
+  import { AnimationProp } from '../../../types/animation-prop';
+  import { useState } from '../../../composables/use-state';
   import { MainScrollId } from './scroll.const';
 
   /**
@@ -32,113 +30,118 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(scrollXModule)],
-    components: { BaseEventButton }
-  })
-  export default class ScrollToTop extends Vue {
-    /**
-     * Animation to use for showing/hiding the button.
-     *
-     * @public
-     */
-    @Prop({ default: () => NoElement })
-    public animation!: Vue | string;
-
-    /**
-     * Threshold in pixels from the top to show the button.
-     *
-     * @public
-     */
-    @Prop()
-    public thresholdPx?: number;
-
-    /**
-     * Id of the target scroll component.
-     *
-     * @public
-     */
-    @Prop({ default: MainScrollId })
-    public scrollId!: string;
-
-    /**
-     * State of all the scroll components in this module.
-     *
-     * @internal
-     */
-    // TODO: Directly retrieve the needed data in this computed property
-    @State('scroll', 'data')
-    public scrollPositionsMap!: Dictionary<ScrollComponentState>;
-
-    /**
-     * The scroll data retrieved for this component.
-     *
-     * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been
-     * passed. Otherwise it returns `null`.
-     * @internal
-     */
-    protected get scrollData(): ScrollComponentState {
-      return this.scrollId && this.scrollPositionsMap[this.scrollId]
-        ? this.scrollPositionsMap[this.scrollId]
-        : {
-            position: 0,
-            direction: 'UP',
-            hasReachedStart: false,
-            hasAlmostReachedEnd: false,
-            hasReachedEnd: false
-          };
+  export default defineComponent({
+    name: 'ScrollToTop',
+    xModule: scrollXModule.name,
+    components: { BaseEventButton },
+    props: {
+      /**
+       * Animation to use for showing/hiding the button.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: () => NoElement
+      },
+      /**
+       * Threshold in pixels from the top to show the button.
+       *
+       * @public
+       */
+      thresholdPx: Number,
+      /**
+       * Id of the target scroll component.
+       *
+       * @public
+       */
+      scrollId: {
+        type: String,
+        default: MainScrollId
+      }
+    },
+    setup(props) {
+      /**
+       * State of all the scroll components in this module.
+       *
+       * @internal
+       */
+      // TODO: Directly retrieve the needed data in this computed property
+      const { data } = useState('scroll', ['data']);
+
+      /**
+       * The scroll data retrieved for this component.
+       *
+       * @returns The scroll data for this component if a valid {@link ScrollToTop.scrollId} has been
+       * passed. Otherwise it returns `null`.
+       * @internal
+       */
+      const scrollData = computed(() => {
+        return props.scrollId && data.value[props.scrollId]
+          ? data.value[props.scrollId]
+          : {
+              position: 0,
+              direction: 'UP',
+              hasReachedStart: false,
+              hasAlmostReachedEnd: false,
+              hasReachedEnd: false
+            };
+      });
+
+      /**
+       * Event that will be emitted when the scroll to top is clicked.
+       *
+       * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.
+       * @internal
+       */
+      const events = computed(
+        (): Partial<XEventsTypes> => ({ UserClickedScrollToTop: props.scrollId })
+      );
+
+      /**
+       * Checks if the thresholdPx prop has been provided and if it is a number.
+       *
+       * @returns If the thresholdPx is a number or not.
+       * @internal
+       */
+      const useThresholdStrategy = computed(() => typeof props.thresholdPx === 'number');
+
+      /**
+       * Checks if the threshold has been reached in case the threshold strategy is in use.
+       *
+       * @returns If the scrollTop is bigger than the thresholdPx.
+       * @internal
+       */
+      const isThresholdReached = computed(
+        () => useThresholdStrategy.value && scrollData.value.position > props.thresholdPx!
+      );
+
+      /**
+       * Returns if the scroll has almost reached its end or not.
+       *
+       * @returns True if the scroll has almost reached the end and the user is still scrolling down.
+       * @internal
+       */
+      const hasAlmostReachedScrollEnd = computed(
+        () => scrollData.value.hasAlmostReachedEnd && scrollData.value.direction === 'DOWN'
+      );
+
+      /**
+       * Whether if the button is visible or not depending on the strategy being used.
+       *
+       * @returns If the button should be visible or not.
+       * @internal
+       */
+      const isVisible = computed(() =>
+        useThresholdStrategy.value ? isThresholdReached.value : hasAlmostReachedScrollEnd.value
+      );
+
+      return {
+        events,
+        isVisible
+      };
     }
-
-    /**
-     * Event that will be emitted when the scroll to top is clicked.
-     *
-     * @returns The event to be emitted when the scroll to top is clicked. The id as a payload.
-     * @internal
-     */
-    protected get events(): Partial<XEventsTypes> {
-      return { UserClickedScrollToTop: this.scrollId };
-    }
-
-    /**
-     * Checks if the thresholdPx prop has been provided and if it is a number.
-     *
-     * @returns If the thresholdPx is a number or not.
-     * @internal
-     */
-    protected get useThresholdStrategy(): boolean {
-      return typeof this.thresholdPx === 'number';
-    }
-
-    /**
-     * Checks if the threshold has been reached in case the threshold strategy is in use.
-     *
-     * @returns If the scrollTop is bigger than the thresholdPx.
-     * @internal
-     */
-    protected get isThresholdReached(): boolean {
-      return this.useThresholdStrategy && this.scrollData.position > this.thresholdPx!;
-    }
-
-    /**
-     * Whether if the button is visible or not depending on the strategy being used.
-     *
-     * @returns If the button should be visible or not.
-     * @internal
-     */
-    protected get isVisible(): boolean {
-      return this.useThresholdStrategy ? this.isThresholdReached : this.hasAlmostReachedScrollEnd;
-    }
-
-    /**
-     * Returns if the scroll has almost reached its end or not.
-     *
-     * @returns True if the scroll has almost reached the end and the user is still scrolling down.
-     * @internal
-     */
-    protected get hasAlmostReachedScrollEnd(): boolean {
-      return this.scrollData.hasAlmostReachedEnd && this.scrollData.direction === 'DOWN';
-    }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/scroll/components/scroll.vue b/packages/x-components/src/x-modules/scroll/components/scroll.vue
index a5250b30cc..7b78d135e2 100644
--- a/packages/x-components/src/x-modules/scroll/components/scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/scroll.vue
@@ -1,27 +1,26 @@
 <template>
   <BaseScroll
+    ref="scrollRef"
     @scroll="emitScroll"
     @scroll:direction-change="emitScrollDirectionChange"
     @scroll:at-start="emitScrollAtStart"
     @scroll:almost-at-end="emitScrollAlmostAtEnd"
     @scroll:at-end="emitScrollAtEnd"
     v-on="$listeners"
-    :id="id"
     v-bind="$attrs"
+    :id="id"
   >
     <slot />
   </BaseScroll>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { ComponentPublicInstance, defineComponent, ref } from 'vue';
   import { WireMetadata } from '../../../wiring/wiring.types';
-  import { XOn } from '../../../components/decorators/bus.decorators';
   import BaseScroll from '../../../components/scroll/base-scroll.vue';
   import { ScrollDirection } from '../../../components/scroll/scroll.types';
   import { scrollXModule } from '../x-module';
+  import { use$x } from '../../../composables/use-$x';
   import { MainScrollId } from './scroll.const';
 
   /**
@@ -30,92 +29,111 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(scrollXModule)],
-    components: { BaseScroll }
-  })
-  export default class Scroll extends Vue {
-    /**
-     * Id to identify the component.
-     *
-     * @public
-     */
-    @Prop({ default: MainScrollId })
-    public id!: string;
+  export default defineComponent({
+    name: 'Scroll',
+    xModule: scrollXModule.name,
+    components: { BaseScroll },
+    props: {
+      /**
+       * Id to identify the component.
+       *
+       * @public
+       */
+      id: {
+        type: String,
+        default: MainScrollId
+      }
+    },
+    setup(props) {
+      const $x = use$x();
 
-    /**
-     * Emits the `UserScrolled` event.
-     *
-     * @param position - The new position of scroll.
-     * @internal
-     */
-    protected emitScroll(position: number): void {
-      this.$x.emit('UserScrolled', position, this.createEventMetadata());
-    }
+      const scrollRef = ref<ComponentPublicInstance>();
 
-    /**
-     * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.
-     *
-     * @param direction - The new direction of scroll.
-     * @internal
-     */
-    protected emitScrollDirectionChange(direction: ScrollDirection): void {
-      this.$x.emit('UserChangedScrollDirection', direction, this.createEventMetadata());
-    }
+      /**
+       * Creates a {@link WireMetadata} metadata object for all the emitted events.
+       *
+       * @internal
+       * @returns A new {@link WireMetadata} object.
+       */
+      const createEventMetadata = (): Partial<WireMetadata> => {
+        return {
+          target: scrollRef.value?.$el as HTMLElement,
+          id: props.id
+        };
+      };
 
-    /**
-     * Emits the 'UserReachedScrollStart' event when the user reaches the start.
-     *
-     * @param isAtStart - A boolean indicating if the scroll is at the ending position.
-     * @internal
-     */
-    protected emitScrollAtStart(isAtStart: boolean): void {
-      this.$x.emit('UserReachedScrollStart', isAtStart, this.createEventMetadata());
-    }
+      /**
+       * Emits the `UserScrolled` event.
+       *
+       * @param position - The new position of scroll.
+       * @internal
+       */
+      const emitScroll = (position: number) => {
+        $x.emit('UserScrolled', position, createEventMetadata());
+      };
 
-    /**
-     * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.
-     *
-     * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.
-     * @internal
-     */
-    protected emitScrollAlmostAtEnd(isAlmostAtEnd: boolean): void {
-      this.$x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, this.createEventMetadata());
-    }
+      /**
+       * Emits the `UserChangedScrollDirection` event when the scrolling direction has changed.
+       *
+       * @param direction - The new direction of scroll.
+       * @internal
+       */
+      const emitScrollDirectionChange = (direction: ScrollDirection) => {
+        $x.emit('UserChangedScrollDirection', direction, createEventMetadata());
+      };
 
-    /**
-     * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.
-     *
-     * @param isAtEnd - A boolean indicating if the scroll is at the ending position.
-     * @internal
-     */
-    protected emitScrollAtEnd(isAtEnd: boolean): void {
-      this.$x.emit('UserReachedScrollEnd', isAtEnd, this.createEventMetadata());
-    }
+      /**
+       * Emits the 'UserReachedScrollStart' event when the user reaches the start.
+       *
+       * @param isAtStart - A boolean indicating if the scroll is at the ending position.
+       * @internal
+       */
+      const emitScrollAtStart = (isAtStart: boolean) => {
+        $x.emit('UserReachedScrollStart', isAtStart, createEventMetadata());
+      };
 
-    /**
-     * Creates a {@link WireMetadata} metadata object for all the emitted events.
-     *
-     * @internal
-     * @returns A new {@link WireMetadata} object.
-     */
-    protected createEventMetadata(): Partial<WireMetadata> {
-      return { target: this.$el as HTMLElement, id: this.id };
-    }
+      /**
+       * Emits the 'UserAlmostReachedScrollEnd' event when the user is about to reach to end.
+       *
+       * @param isAlmostAtEnd - A boolean indicating if the scroll is almost at its ending position.
+       * @internal
+       */
+      const emitScrollAlmostAtEnd = (isAlmostAtEnd: boolean) => {
+        $x.emit('UserAlmostReachedScrollEnd', isAlmostAtEnd, createEventMetadata());
+      };
 
-    /**
-     * Scrolls to initial position when the user has clicked the scroll to top button.
-     *
-     * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.
-     * @internal
-     */
-    @XOn('UserClickedScrollToTop')
-    scrollToTop(scrollId: string): void {
-      if (scrollId === this.id && this.$el) {
-        this.$el?.scrollTo({ top: 0, behavior: 'smooth' });
-      }
+      /**
+       * Emits the 'UserReachedScrollEnd' event when the user is about to reach to end.
+       *
+       * @param isAtEnd - A boolean indicating if the scroll is at the ending position.
+       * @internal
+       */
+      const emitScrollAtEnd = (isAtEnd: boolean) => {
+        $x.emit('UserReachedScrollEnd', isAtEnd, createEventMetadata());
+      };
+
+      /**
+       * Scrolls to initial position when the user has clicked the scroll to top button.
+       *
+       * @param scrollId - {@link XEventsTypes.UserClickedScrollToTop}.
+       * @internal
+       */
+      $x.on('UserClickedScrollToTop', false).subscribe((scrollId: string) => {
+        if (scrollId === props.id && scrollRef.value) {
+          scrollRef.value.$el.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+      });
+
+      return {
+        scrollRef,
+        emitScrollAtEnd,
+        emitScrollAlmostAtEnd,
+        emitScrollAtStart,
+        emitScrollDirectionChange,
+        emitScroll
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">