diff --git a/packages/x-components/src/x-modules/search/components/__tests__/redirection.spec.ts b/packages/x-components/src/x-modules/search/components/__tests__/redirection.spec.ts
index 993181b755..bd725d3291 100644
--- a/packages/x-components/src/x-modules/search/components/__tests__/redirection.spec.ts
+++ b/packages/x-components/src/x-modules/search/components/__tests__/redirection.spec.ts
@@ -1,11 +1,11 @@
 import { DeepPartial } from '@empathyco/x-utils';
 import Vuex, { Store } from 'vuex';
 import { Redirection as RedirectionModel } from '@empathyco/x-types';
-import { createLocalVue, Wrapper, mount } from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
 import { createRedirectionStub } from '../../../../__stubs__/redirections-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { XPlugin } from '../../../../plugins';
+import { XPlugin } from '../../../../plugins/x-plugin';
 import { RootXStoreState } from '../../../../store/store.types';
 import { WirePayload } from '../../../../wiring/wiring.types';
 import Redirection from '../redirection.vue';
@@ -27,13 +27,12 @@ function renderRedirection({
   redirections = stubRedirections,
   mode = 'auto',
   delayInSeconds = 1
-}: RenderRedirectionOptions = {}): RenderRedirectionAPI {
+} = {}) {
   const localVue = createLocalVue();
   localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
   installNewXPlugin({ store }, localVue);
 
-  XPlugin.resetInstance();
   resetXSearchStateWith(store, { redirections });
   const wrapper = mount(
     {
@@ -54,6 +53,12 @@ function renderRedirection({
     }
   );
 
+  const onUserAbortedARedirection = jest.fn();
+  XPlugin.bus.on('UserClickedAbortARedirection', true).subscribe(onUserAbortedARedirection);
+
+  const onUserClickedARedirection = jest.fn();
+  XPlugin.bus.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
+
   return {
     wrapper: wrapper.findComponent(Redirection),
     acceptRedirection() {
@@ -61,7 +66,9 @@ function renderRedirection({
     },
     abortRedirection() {
       wrapper.find(getDataTestSelector('redirection-abort')).element.click();
-    }
+    },
+    onUserClickedARedirection,
+    onUserAbortedARedirection
   };
 }
 
@@ -116,10 +123,9 @@ describe('testing Redirection component', () => {
 
   //eslint-disable-next-line max-len
   it('redirects and emits the `UserClickedARedirection` event in manual mode when the user click the button', () => {
-    const { wrapper, acceptRedirection } = renderRedirection({ mode: 'manual' });
-    const onUserClickedARedirection = jest.fn();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { onUserClickedARedirection, acceptRedirection } = renderRedirection({ mode: 'manual' });
 
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
     acceptRedirection();
 
     expect(onUserClickedARedirection).toHaveBeenCalledTimes(1);
@@ -127,7 +133,7 @@ describe('testing Redirection component', () => {
       eventPayload: stubRedirections[0],
       metadata: {
         moduleName: 'search',
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
@@ -137,10 +143,7 @@ describe('testing Redirection component', () => {
 
   //eslint-disable-next-line max-len
   it("doesn't redirect and doesn't emit the event `UserClickedARedirection` in manual when the user doesn't click the button", () => {
-    const { wrapper } = renderRedirection({ mode: 'manual' });
-    const onUserClickedARedirection = jest.fn();
-
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
+    const { onUserClickedARedirection } = renderRedirection({ mode: 'manual' });
 
     jest.runAllTicks();
 
@@ -150,19 +153,17 @@ describe('testing Redirection component', () => {
 
   //eslint-disable-next-line max-len
   it('redirects and emits the `UserClickedARedirection` event in auto mode and 0 seconds of delay', () => {
-    const { wrapper } = renderRedirection({ delayInSeconds: 0 });
-    const onUserClickedARedirection = jest.fn();
+    const { onUserClickedARedirection } = renderRedirection({ delayInSeconds: 0 });
 
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
     // The delay 0 runs so fast the we need to force the test to simulate a wait.
-    jest.advanceTimersByTime(1);
+    jest.advanceTimersByTime(0);
 
     expect(onUserClickedARedirection).toHaveBeenCalledTimes(1);
     expect(onUserClickedARedirection).toHaveBeenCalledWith<[WirePayload<RedirectionModel>]>({
       eventPayload: stubRedirections[0],
       metadata: {
         moduleName: 'search',
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
@@ -171,12 +172,10 @@ describe('testing Redirection component', () => {
   });
 
   it('emits the redirection event `UserClickedAbortARedirection`', () => {
-    const { wrapper, abortRedirection } = renderRedirection();
-    const onUserClickedARedirection = jest.fn();
-    const onUserAbortedARedirection = jest.fn();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { onUserClickedARedirection, onUserAbortedARedirection, abortRedirection } =
+      renderRedirection();
 
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
-    wrapper.vm.$x.on('UserClickedAbortARedirection', true).subscribe(onUserAbortedARedirection);
     abortRedirection();
     jest.runAllTicks();
 
@@ -187,11 +186,8 @@ describe('testing Redirection component', () => {
 
   //eslint-disable-next-line max-len
   it("doesn't redirect and doesn't emit the `UserClickedARedirection` event if there is a new query accepted", () => {
-    const { wrapper } = renderRedirection();
-    const onUserClickedARedirection = jest.fn();
-
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
-    wrapper.vm.$x.emit('UserAcceptedAQuery', 'lego');
+    const { onUserClickedARedirection } = renderRedirection();
+    XPlugin.bus.emit('UserAcceptedAQuery', 'lego');
 
     jest.runAllTicks();
 
@@ -199,23 +195,3 @@ describe('testing Redirection component', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 });
-
-interface RenderRedirectionOptions {
-  /** The redirection mode. */
-  mode?: 'auto' | 'manual';
-  /** The redirection delay in seconds. */
-  delayInSeconds?: number;
-  /** The template to be rendered. */
-  template?: string;
-  /** List of redirections to be rendered. */
-  redirections?: RedirectionModel[];
-}
-
-interface RenderRedirectionAPI {
-  /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
-  /** Helper method to accept a redirection. */
-  acceptRedirection: () => void;
-  /** Helper method to abort a redirection. */
-  abortRedirection: () => void;
-}
diff --git a/packages/x-components/src/x-modules/search/components/redirection.vue b/packages/x-components/src/x-modules/search/components/redirection.vue
index 5da5f93f45..40be8f55ba 100644
--- a/packages/x-components/src/x-modules/search/components/redirection.vue
+++ b/packages/x-components/src/x-modules/search/components/redirection.vue
@@ -1,17 +1,16 @@
 <template>
-  <div v-if="redirection && $scopedSlots.default" class="x-redirection" data-test="redirection">
+  <div v-if="redirection && slots.default" class="x-redirection" data-test="redirection">
     <slot v-bind="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }" />
   </div>
 </template>
 
 <script lang="ts">
   import { Redirection as RedirectionModel } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import { XOn } from '../../../components/decorators/bus.decorators';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { computed, defineComponent, PropType, Ref, ref, watch } from 'vue';
   import { searchXModule } from '../x-module';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
+  import { XEvent } from '../../../wiring/events.types';
 
   /**
    * A redirection is a component that sends the user to a link in the website. It is helpful when
@@ -20,103 +19,125 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule)]
-  })
-  export default class Redirection extends Vue {
-    @State('search', 'redirections')
-    public redirections!: RedirectionModel[];
-
-    /**
-     * The redirection mode. Auto for auto redirection and manual for an user interaction.
-     *
-     * @public
-     */
-    @Prop({ default: 'auto' })
-    public mode!: 'auto' | 'manual';
-
-    /**
-     * The waiting time in seconds until the redirection is made.
-     *
-     * @remarks this delay only works in auto mode.
-     *
-     * @public
-     */
-    @Prop({ default: 0 })
-    public delayInSeconds!: number;
-
-    /**
-     * The timeout id, used to cancel the redirection.
-     *
-     * @internal
-     */
-    protected timeoutId?: number;
-
-    /**
-     * Boolean flag which indicates if the redirection is running.
-     *
-     * @public
-     */
-    protected isRedirecting = true;
-
-    /**
-     * Computed property which returns the first recommendation of the state, if any returns null.
-     *
-     * @returns The first redirection of the state.
-     *
-     * @internal
-     */
-    protected get redirection(): RedirectionModel | null {
-      return this.redirections?.[0] ?? null;
-    }
-
-    /**
-     * Watcher function which adds a setTimeout to the redirect method is the component
-     * is in auto mode and there are redirections.
-     *
-     * @internal
-     */
-    @Watch('redirections', { immediate: true })
-    protected redirectWithDelay(): void {
-      this.isRedirecting = true;
-      if (this.mode === 'auto' && this.redirection) {
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        this.timeoutId = window.setTimeout(this.redirect, this.delayInSeconds * 1000);
+  export default defineComponent({
+    name: 'Redirection',
+    xModule: searchXModule.name,
+    props: {
+      /**
+       * The redirection mode. Auto for auto redirection and manual for an user interaction.
+       *
+       * @public
+       */
+      mode: {
+        type: String as PropType<'auto' | 'manual'>,
+        default: 'auto'
+      },
+      /**
+       * The waiting time in seconds until the redirection is made.
+       *
+       * @remarks this delay only works in auto mode.
+       *
+       * @public
+       */
+      delayInSeconds: {
+        type: Number,
+        default: 0
       }
-    }
+    },
+    setup(props, { slots }) {
+      const $x = use$x();
+
+      const { redirections } = useState('search', ['redirections']);
+
+      /**
+       * The timeout id, used to cancel the redirection.
+       *
+       * @internal
+       */
+      const timeoutId: Ref<number> = ref(0);
+
+      /**
+       * Boolean flag which indicates if the redirection is running.
+       *
+       * @public
+       */
+      const isRedirecting = ref(true);
+
+      /**
+       * Computed property which returns the first recommendation of the state, if any returns null.
+       *
+       * @returns The first redirection of the state.
+       *
+       * @internal
+       */
+      const redirection = computed((): RedirectionModel | null => redirections?.value[0] ?? null);
+
+      /**
+       * Dispatches the redirection, updating the url.
+       *
+       * @public
+       */
+      const redirect = () => {
+        clearTimeout(timeoutId.value);
+        $x.emit('UserClickedARedirection', redirection.value!);
+        window.location.replace(redirection.value!.url);
+      };
 
-    /**
-     * Dispatches the redirection, updating the url.
-     *
-     * @public
-     */
-    protected redirect(): void {
-      clearTimeout(this.timeoutId);
-      this.$x.emit('UserClickedARedirection', this.redirection!);
-      window.location.replace(this.redirection!.url);
-    }
+      /**
+       * Watcher function which adds a setTimeout to the redirect method is the component
+       * is in auto mode and there are redirections.
+       *
+       * @internal
+       */
+      watch(
+        redirections,
+        () => {
+          isRedirecting.value = true;
+          if (props.mode === 'auto' && redirection.value) {
+            // eslint-disable-next-line @typescript-eslint/unbound-method
+            timeoutId.value = window.setTimeout(redirect, props.delayInSeconds * 1000);
+          }
+        },
+        { immediate: true }
+      );
+
+      /**
+       * Stops the animation if the user search another query.
+       *
+       * @internal
+       */
+      const eventsToStopAnimation: XEvent[] = [
+        'UserAcceptedAQuery',
+        'UserClearedQuery',
+        'UserSelectedARelatedTag'
+      ];
+
+      const cancelRedirect = () => {
+        clearTimeout(timeoutId.value);
+        isRedirecting.value = false;
+      };
 
-    /**
-     * Stops the redirection, emitting `UserClickedAbortARedirection` event.
-     *
-     * @public
-     */
-    protected abortRedirect(): void {
-      this.cancelRedirect();
-      this.$x.emit('UserClickedAbortARedirection');
-    }
+      eventsToStopAnimation.forEach(event => $x.on(event, false).subscribe(cancelRedirect));
+
+      /**
+       * Stops the redirection, emitting `UserClickedAbortARedirection` event.
+       *
+       * @public
+       */
+      const abortRedirect = () => {
+        cancelRedirect();
+        $x.emit('UserClickedAbortARedirection');
+      };
 
-    /**
-     * Stops the animation if the user search another query.
-     *
-     * @internal
-     */
-    @XOn(['UserAcceptedAQuery', 'UserClearedQuery', 'UserSelectedARelatedTag'])
-    cancelRedirect(): void {
-      clearTimeout(this.timeoutId);
-      this.isRedirecting = false;
+      return {
+        redirection,
+        redirect,
+        abortRedirect,
+        isRedirecting,
+        slots
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss"></style>