diff --git a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
index dfa8de8c27..ea4a64350a 100644
--- a/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue
@@ -13,15 +13,12 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
+  import { useRegisterXModule, useState } from '../../../composables/index';
 
   /**
    * A button that when is pressed, emits the
@@ -30,51 +27,59 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class ClearHistoryQueries extends Vue {
-    /**
-     * The whole history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * Returns if the array of history queries is empty.
-     *
-     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
-     * @internal
-     */
-    protected get isHistoryQueriesEmpty(): boolean {
-      return this.historyQueries.length === 0;
-    }
+  export default defineComponent({
+    name: 'ClearHistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The whole history queries.
+       *
+       * @internal
+       */
+      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+
+      /**
+       * Returns if the array of history queries is empty.
+       *
+       * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
+       * @internal
+       */
+      const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0);
+
+      /**
+       * Dynamic CSS classes to add to the root element of this component.
+       *
+       * @returns A booleans dictionary where each key is the class name to add, and the boolean value
+       * tells if it should be added or not.
+       * @internal
+       */
+      const dynamicClasses = computed((): VueCSSClasses => {
+        return {
+          'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value
+        };
+      });
+
+      /**
+       * The list of events that are going to be emitted when the button is pressed.
+       *
+       * @internal
+       */
+      const clearHistoryQueriesEvents: Partial<XEventsTypes> = {
+        UserPressedClearHistoryQueries: undefined
+      };
 
-    /**
-     * Dynamic CSS classes to add to the root element of this component.
-     *
-     * @returns A booleans dictionary where each key is the class name to add, and the boolean value
-     * tells if it should be added or not.
-     * @internal
-     */
-    protected get dynamicClasses(): VueCSSClasses {
       return {
-        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty
+        dynamicClasses,
+        clearHistoryQueriesEvents,
+        isHistoryQueriesEmpty
       };
     }
-
-    /**
-     * The list of events that are going to be emitted when the button is pressed.
-     *
-     * @internal
-     */
-    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {
-      UserPressedClearHistoryQueries: undefined
-    };
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
index f32ea08109..7ea07c5739 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue
@@ -3,14 +3,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { HistoryQuery } from '@empathyco/x-types';
+  import { computed, defineComponent } from 'vue';
   import BaseSwitch from '../../../components/base-switch.vue';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
+  import { use$x, useRegisterXModule, useState } from '../../../composables/index';
 
   /**
    * History Queries Switch is a component to activate or deactivate the history queries.
@@ -18,49 +15,57 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(historyQueriesXModule)],
-    components: { BaseSwitch }
-  })
-  export default class HistoryQueriesSwitch extends Vue {
-    /**
-     * A boolean with the isEnabled value coming from the store state.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'isEnabled')
-    public isEnabled!: boolean;
-
-    /**
-     * The history queries from the state.
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * Checks if there are history queries.
-     *
-     * @returns True if there are history queries; false otherwise.
-     */
-    protected get hasHistoryQueries(): boolean {
-      return !isArrayEmpty(this.historyQueries);
-    }
+  export default defineComponent({
+    name: 'HistoryQueriesSwitch',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseSwitch
+    },
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      const $x = use$x();
+
+      /**
+       * A boolean with the isEnabled value coming from the store state.
+       *
+       * @internal
+       */
+      const isEnabled = useState('historyQueries', ['isEnabled']).isEnabled;
+
+      /**
+       * The history queries from the state.
+       */
+      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+
+      /**
+       * Checks if there are history queries.
+       *
+       * @returns True if there are history queries; false otherwise.
+       */
+      const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+
+      /**
+       * Emits an event based on the switch state.
+       *
+       * @internal
+       */
+      const toggle = (): void => {
+        $x.emit(
+          isEnabled.value
+            ? hasHistoryQueries.value
+              ? 'UserClickedDisableHistoryQueries'
+              : 'UserClickedConfirmDisableHistoryQueries'
+            : 'UserClickedEnableHistoryQueries'
+        );
+      };
 
-    /**
-     * Emits an event based on the switch state.
-     *
-     * @internal
-     */
-    protected toggle(): void {
-      this.$x.emit(
-        this.isEnabled
-          ? this.hasHistoryQueries
-            ? 'UserClickedDisableHistoryQueries'
-            : 'UserClickedConfirmDisableHistoryQueries'
-          : 'UserClickedEnableHistoryQueries'
-      );
+      return {
+        toggle,
+        isEnabled
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
index fd5fd310a5..6979a83cb6 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
@@ -47,13 +47,10 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { historyQueriesXModule } from '../x-module';
+  import { useGetter, useRegisterXModule } from '../../../composables/index';
   import HistoryQuery from './history-query.vue';
 
   /**
@@ -63,20 +60,31 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'HistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseSuggestions,
+      HistoryQuery
+    },
     inheritAttrs: false,
-    components: { BaseSuggestions, HistoryQuery },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class HistoryQueries extends Vue {
-    /**
-     * The filtered list of history queries.
-     *
-     * @internal
-     */
-    @Getter('historyQueries', 'historyQueriesWithResults')
-    public historyQueries!: HistoryQueryModel[];
-  }
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The filtered list of history queries.
+       *
+       * @internal
+       */
+      const historyQueries = useGetter('historyQueries', [
+        'historyQueriesWithResults'
+      ]).historyQueriesWithResults;
+
+      return {
+        historyQueries
+      };
+    }
+  });
 </script>
 
 <!--eslint-disable max-len -->
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-query.vue b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
index 05736a0649..98e897c1d7 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-query.vue
@@ -7,7 +7,7 @@
       @property {MouseEvent} event - The original mouse event
     -->
     <BaseSuggestion
-      @click="$emit('click', suggestion, $event)"
+      @click="clickHistoryQuery"
       class="x-history-query__suggestion"
       :class="suggestionClass"
       v-bind="{ suggestion, suggestionSelectedEvents, query }"
@@ -40,14 +40,11 @@
 
 <script lang="ts">
   import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';
-  import { Component, Mixins, Prop } from 'vue-property-decorator';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import Highlight from '../../../components/highlight.vue';
+  import { computed, defineComponent, PropType } from 'vue';
   import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
-  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';
+  import { useGetter, useRegisterXModule } from '../../../composables/index';
   import RemoveHistoryQuery from './remove-history-query.vue';
 
   /**
@@ -57,41 +54,57 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(historyQueriesXModule)],
-    components: { Highlight, RemoveHistoryQuery, BaseSuggestion }
-  })
-  export default class HistoryQuery extends Mixins(
-    dynamicPropsMixin(['removeButtonClass', 'suggestionClass'])
-  ) {
-    /**
-     * The history query suggestion to render.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected suggestion!: HistoryQueryModel;
-
-    /**
-     * The normalized query of the history-queries module.
-     *
-     * @internal
-     */
-    @Getter('historyQueries', 'normalizedQuery')
-    public query!: string;
-
-    /**
-     * The list of events that are going to be emitted when the suggestion button is pressed.
-     *
-     * @internal
-     * @returns The {@link XEvent} to emit.
-     */
-    protected get suggestionSelectedEvents(): Partial<XEventsTypes> {
+  export default defineComponent({
+    name: 'HistoryQuery',
+    xModule: historyQueriesXModule.name,
+    components: { RemoveHistoryQuery, BaseSuggestion },
+    props: {
+      /**
+       * The history query suggestion to render.
+       *
+       * @public
+       */
+      suggestion: {
+        type: Object as PropType<HistoryQueryModel>,
+        required: true
+      },
+      /** Class inherited by content element. */
+      removeButtonClass: String,
+      /** Class inherited by content element. */
+      suggestionClass: String
+    },
+    emits: ['click'],
+    setup(props, { emit }) {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The normalized query of the history-queries module.
+       *
+       * @internal
+       */
+      const query = useGetter('historyQueries', ['normalizedQuery']).normalizedQuery;
+
+      /**
+       * The list of events that are going to be emitted when the suggestion button is pressed.
+       *
+       * @internal
+       * @returns The {@link XEvent} to emit.
+       */
+      const suggestionSelectedEvents = computed((): Partial<XEventsTypes> => {
+        return {
+          UserSelectedAHistoryQuery: props.suggestion
+        };
+      });
+
+      const clickHistoryQuery = () => emit('click', props.suggestion, event);
+
       return {
-        UserSelectedAHistoryQuery: this.suggestion
+        query,
+        suggestionSelectedEvents,
+        clickHistoryQuery
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index 8f7135c2ec..c1a7c3fe4b 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -59,15 +59,13 @@
 <script lang="ts">
   import { HistoryQuery } from '@empathyco/x-types';
   import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Inject, Prop } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent, inject } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
   import { groupItemsBy, isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { historyQueriesXModule } from '../x-module';
-  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';
+  import { AnimationProp } from '../../../types/index';
+  import { useRegisterXModule, useState } from '../../../composables/index';
   import HistoryQueryComponent from './history-query.vue';
 
   /**
@@ -81,117 +79,133 @@
    * made in the past.
    * @public
    */
-  @Component({
-    components: { HistoryQuery: HistoryQueryComponent, BaseSuggestions },
-    mixins: [xComponentMixin(historyQueriesXModule), dynamicPropsMixin(['queriesListClass'])]
-  })
-  export default class MyHistory extends Vue {
-    /**
-     * Animation component that will be used to animate the suggestions.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-
-    /**
-     * The current locale.
-     *
-     * @public
-     */
-    @Prop({ default: 'en' })
-    protected locale!: string;
-
-    /**
-     * The list of history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * The provided {@link SnippetConfig}.
-     *
-     * @internal
-     */
-    @Inject('snippetConfig')
-    public snippetConfig?: SnippetConfig;
-
-    /**
-     * Returns a record of history queries grouped by date.
-     *
-     * @example
-     * ```typescript
-     *  const historyQueriesGrouped = {
-     *    'Monday, January 10th, 2022' : [{
-     *      query: 'lego',
-     *      modelName: 'HistoryQuery',
-     *      timestamp: 121312312
-     *    }],
-     *    'Tuesday, January 11th, 2022' : [{
-     *      query: 'barbie',
-     *      modelName: 'HistoryQuery',
-     *      timestamp: 15221212
-     *    }]
-     *  }
-     * ```
-     * @returns The history queries grouped by date.
-     * @internal
-     */
-    protected get groupByDate(): Dictionary<HistoryQuery[]> {
-      return groupItemsBy(this.historyQueries, current => {
-        return new Date(current.timestamp).toLocaleDateString(this.usedLocale, {
-          day: 'numeric',
-          weekday: 'long',
-          month: 'long',
-          year: 'numeric'
-        });
+  export default defineComponent({
+    name: 'MyHistory',
+    xModule: historyQueriesXModule.name,
+    components: {
+      HistoryQuery: HistoryQueryComponent,
+      BaseSuggestions
+    },
+    props: {
+      /**
+       * Animation component that will be used to animate the suggestions.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+      /**
+       * The current locale.
+       *
+       * @public
+       */
+      locale: {
+        type: String,
+        default: 'en'
+      },
+      /** Class inherited by content element. */
+      queriesListClass: String
+    },
+    setup(props) {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The list of history queries.
+       *
+       * @internal
+       */
+      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+
+      /**
+       * The provided {@link SnippetConfig}.
+       *
+       * @internal
+       */
+      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');
+
+      /**
+       * The locale that it is going to be used. It can be the one send it by the snippet config or
+       * the one pass it using the prop.
+       *
+       * @returns The locale to be used.
+       * @internal
+       */
+      const usedLocale = computed(() => {
+        return snippetConfig?.lang ?? props.locale;
       });
-    }
 
-    /**
-     * Formats a timestamp into `hh:mm [PM/AM]` format.
-     *
-     * @example
-     * ```typescript
-     * // locale 'es'
-     * console.log(formatTime(Date.now()) // '16:54'.
-     *
-     * // locale 'en'
-     * console.log(formatTime(Date.now()) // '16:54 PM'.
-     * ```
-     * @param timestamp - The timestamp to format.
-     * @returns The formatted time.
-     * @internal
-     */
-    protected formatTime(timestamp: number): string {
-      return new Date(timestamp).toLocaleTimeString(this.usedLocale, {
-        hour: '2-digit',
-        minute: '2-digit'
+      /**
+       * Returns a record of history queries grouped by date.
+       *
+       * @example
+       * ```typescript
+       *  const historyQueriesGrouped = {
+       *    'Monday, January 10th, 2022' : [{
+       *      query: 'lego',
+       *      modelName: 'HistoryQuery',
+       *      timestamp: 121312312
+       *    }],
+       *    'Tuesday, January 11th, 2022' : [{
+       *      query: 'barbie',
+       *      modelName: 'HistoryQuery',
+       *      timestamp: 15221212
+       *    }]
+       *  }
+       * ```
+       * @returns The history queries grouped by date.
+       * @internal
+       */
+      const groupByDate = computed((): Dictionary<HistoryQuery[]> => {
+        return groupItemsBy(historyQueries.value, current => {
+          return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {
+            day: 'numeric',
+            weekday: 'long',
+            month: 'long',
+            year: 'numeric'
+          });
+        });
       });
+
+      /**
+       * Formats a timestamp into `hh:mm [PM/AM]` format.
+       *
+       * @example
+       * ```typescript
+       * // locale 'es'
+       * console.log(formatTime(Date.now()) // '16:54'.
+       *
+       * // locale 'en'
+       * console.log(formatTime(Date.now()) // '16:54 PM'.
+       * ```
+       * @param timestamp - The timestamp to format.
+       * @returns The formatted time.
+       * @internal
+       */
+      const formatTime = (timestamp: number) =>
+        new Date(timestamp).toLocaleTimeString(usedLocale.value, {
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+
+      /**
+       * The `hasHistoryQueries` computed property is a flag representing if there are history queries
+       * stored.
+       *
+       * @returns True if there are history queries; false otherwise.
+       * @internal
+       */
+      const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+
+      return {
+        hasHistoryQueries,
+        formatTime,
+        groupByDate,
+        historyQueries
+      };
     }
-    /**
-     * The `hasHistoryQueries` computed property is a flag representing if there are history queries
-     * stored.
-     *
-     * @returns True if there are history queries; false otherwise.
-     * @internal
-     */
-    protected get hasHistoryQueries(): boolean {
-      return !isArrayEmpty(this.historyQueries);
-    }
-    /**
-     * The locale that it is going to be used. It can be the one send it by the snippet config or
-     * the one pass it using the prop.
-     *
-     * @returns The locale to be used.
-     * @internal
-     */
-    protected get usedLocale(): string {
-      return this.snippetConfig?.lang ?? this.locale;
-    }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
index da87982a90..30e2de8467 100644
--- a/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/remove-history-query.vue
@@ -11,12 +11,11 @@
 
 <script lang="ts">
   import { HistoryQuery } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, PropType } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
+  import { useRegisterXModule } from '../../../composables/index';
 
   /**
    * Button that when it is pressed emits the
@@ -25,32 +24,44 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class RemoveHistoryQuery extends Vue {
-    /**
-     * The historyQuery that will be removed when clicking the clear button.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected historyQuery!: HistoryQuery;
+  export default defineComponent({
+    name: 'RemoveHistoryQuery',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    props: {
+      /**
+       * The historyQuery that will be removed when clicking the clear button.
+       *
+       * @public
+       */
+      historyQuery: {
+        type: Object as PropType<HistoryQuery>,
+        required: true
+      }
+    },
+    setup(props) {
+      useRegisterXModule(historyQueriesXModule);
 
-    /**
-     * The event handler that will be triggered when clicking on the clear history query button.
-     *
-     * @remarks
-     * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
-     *
-     * @returns The {@link XEvent} to emit.
-     * @public
-     */
-    protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {
-      return { UserPressedRemoveHistoryQuery: this.historyQuery };
+      /**
+       * The event handler that will be triggered when clicking on the clear history query button.
+       *
+       * @remarks
+       * {@link HistoryQueriesXEvents.UserPressedRemoveHistoryQuery}: historyQuery
+       *
+       * @returns The {@link XEvent} to emit.
+       * @public
+       */
+      const removeHistoryQueryEvent = computed((): Partial<XEventsTypes> => {
+        return { UserPressedRemoveHistoryQuery: props.historyQuery };
+      });
+
+      return {
+        removeHistoryQueryEvent
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">