diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index fd15497d2e..73771ed41f 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -24,6 +24,8 @@ import {
   TestSlidingPanel,
   TestBaseSuggestions,
   TestHighlight,
+  TestHistoryQueries,
+  TestMyHistory,
   TestBaseResultImages,
   TestBasePanel,
   TestBaseKeyboardNavigation,
@@ -153,6 +155,16 @@ const routes = [
     name: 'Highlight',
     component: TestHighlight
   },
+  {
+    path: '/history-queries',
+    name: 'HistoryQueries',
+    component: TestHistoryQueries
+  },
+  {
+    path: '/my-history',
+    name: 'MyHistory',
+    component: TestMyHistory
+  },
   {
     path: '/base-result-images',
     name: 'BaseResultImages',
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts b/packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts
new file mode 100644
index 0000000000..b13804333c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/components/index.ts
@@ -0,0 +1,2 @@
+export { default as TestHistoryQueries } from './test-history-queries.vue';
+export { default as TestMyHistory } from './test-my-history.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue
new file mode 100644
index 0000000000..6d9928394e
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-history-queries.vue
@@ -0,0 +1,16 @@
+<template>
+  <SearchInput :maxLength="10" />
+  <ClearSearchInput />
+
+  <HistoryQueries :maxItemsToRender="5" />
+  <ClearHistoryQueries class="x-button--ghost x-button--ghost-start">
+    <span>Clear previous searches</span>
+  </ClearHistoryQueries>
+</template>
+
+<script setup>
+  import HistoryQueries from '../../../../../x-components/src/x-modules/history-queries/components/history-queries.vue';
+  import ClearHistoryQueries from '../../../../../x-components/src/x-modules/history-queries/components/clear-history-queries.vue';
+  import ClearSearchInput from '../../../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue
new file mode 100644
index 0000000000..bd1eea8d94
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/components/test-my-history.vue
@@ -0,0 +1,33 @@
+<template>
+  <MyHistory v-if="_$x.isHistoryQueriesEnabled && _$x.fullHistoryQueries.length">
+    <template #date="{ date }">
+      <div>{{ date }}</div>
+    </template>
+
+    <template #suggestion="{ suggestion, formatTime }">
+      <HistoryQuery data-test="my-history-query" :suggestion="suggestion">
+        <div class="flex flex-row gap-8">
+          <p>{{ suggestion.query }}</p>
+
+          <p>
+            {{ formatTime(suggestion.timestamp) }}
+          </p>
+        </div>
+
+        <template #remove-button-content>
+          <span>x</span>
+        </template>
+      </HistoryQuery>
+    </template>
+  </MyHistory>
+</template>
+
+<script setup>
+  import HistoryQuery from '../../../../../x-components/src/x-modules/history-queries/components/history-query.vue';
+  import MyHistory from '../../../../../x-components/src/x-modules/history-queries/components/my-history.vue';
+  import { use$x } from '../../../../../x-components/src/composables/use-$x';
+
+  const _$x = use$x();
+</script>
+
+<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/x-modules/history-queries/index.ts b/packages/_vue3-migration-test/src/x-modules/history-queries/index.ts
new file mode 100644
index 0000000000..07635cbbc8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/history-queries/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index f84c5d1a78..c8a11f0237 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -5,3 +5,4 @@ export * from './search';
 export * from './search-box';
 export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';
+export * from './history-queries';
diff --git a/packages/x-components/src/composables/__tests__/use-getter.spec.ts b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
index 804fbbd5e0..3c103d9160 100644
--- a/packages/x-components/src/composables/__tests__/use-getter.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
@@ -1,72 +1,49 @@
-import { ComputedRef, defineComponent } from 'vue';
-import Vuex, { Store } from 'vuex';
-import { createLocalVue, mount } from '@vue/test-utils';
-import { Dictionary } from '@empathyco/x-utils';
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { useGetter } from '../use-getter';
-import { historyQueriesXStoreModule } from '../../x-modules/history-queries';
-import { AnyXStoreModule } from '../../store/index';
+import { useRegisterXModule } from '../use-register-x-module';
 import { ExtractGetters } from '../../x-modules/x-modules.types';
-
-const renderUseGetterTest = (getters: string[]): renderUseGetterTestAPI => {
-  const testComponent = defineComponent({
-    setup() {
-      const historyQueriesGetter = useGetter(
-        'historyQueries',
-        getters as (keyof ExtractGetters<'historyQueries'>)[]
-      );
-      return {
-        historyQueriesGetter
-      };
-    }
-  });
-
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
-  const store = new Store({
-    modules: {
-      x: {
-        namespaced: true,
-        modules: {
-          historyQueries: { namespaced: true, ...historyQueriesXStoreModule } as AnyXStoreModule
-        }
-      }
-    }
+import { useStore } from '../use-store';
+import { XPlugin } from '../../plugins';
+import { historyQueriesXModule } from '../../x-modules/history-queries/x-module';
+
+jest.mock('../use-store');
+
+function render(modulePaths: (keyof ExtractGetters<'historyQueries'>)[]) {
+  installNewXPlugin();
+  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
+
+  const component = defineComponent({
+    xModule: 'historyQueries',
+    setup: () => {
+      useRegisterXModule(historyQueriesXModule);
+      const historyQueriesGetter = useGetter('historyQueries', modulePaths);
+      return { historyQueriesGetter };
+    },
+    template: `<div/>`
   });
-  installNewXPlugin({ store }, localVue);
 
-  const wrapper = mount(testComponent, {
-    localVue,
-    store
-  });
+  const wrapper = mount(component);
 
-  return {
-    store,
-    historyQueriesGetter: (wrapper.vm as any).historyQueriesGetter
-  };
-};
+  return (wrapper as any).vm.historyQueriesGetter;
+}
 
 describe('testing useGetter composable', () => {
   it('maps store getters', () => {
-    const { historyQueriesGetter, store } = renderUseGetterTest(['storageKey', 'historyQueries']);
-    expect(historyQueriesGetter.storageKey.value).toEqual('history-queries');
-    expect(historyQueriesGetter.historyQueries.value).toHaveLength(0);
+    const { storageKey, historyQueries } = render(['storageKey', 'historyQueries']);
+    expect(storageKey.value).toEqual('history-queries');
+    expect(historyQueries.value).toHaveLength(0);
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    store.dispatch('x/historyQueries/addQueryToHistory', 'chorizo');
+    XPlugin.store.dispatch('x/historyQueries/addQueryToHistory', 'chorizo');
 
-    expect(historyQueriesGetter.historyQueries.value).toHaveLength(1);
+    expect(historyQueries.value).toHaveLength(1);
   });
 
   it('does not return not requested getters', () => {
-    const { historyQueriesGetter } = renderUseGetterTest(['storageKey']);
-    expect(historyQueriesGetter.storageKey).toBeDefined();
-    expect(historyQueriesGetter.historyQueries).toBeUndefined();
+    const { storageKey, historyQueries } = render(['storageKey']);
+    expect(storageKey).toBeDefined();
+    expect(historyQueries).toBeUndefined();
   });
 });
-
-type renderUseGetterTestAPI = {
-  historyQueriesGetter: Dictionary<ComputedRef<string[]>>;
-  store: Store<any>;
-};
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..b30d3b6a6a 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 { useState } from '../../../composables/use-state';
 
   /**
    * A button that when is pressed, emits the
@@ -30,51 +27,57 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class ClearHistoryQueries extends Vue {
-    /**
-     * The whole history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
+  export default defineComponent({
+    name: 'ClearHistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    setup() {
+      /**
+       * The whole history queries.
+       *
+       * @internal
+       */
+      const { historyQueries } = useState('historyQueries', ['historyQueries']);
 
-    /**
-     * 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;
-    }
+      /**
+       * 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 => ({
+          '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..44026e2fc9 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,13 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { computed, defineComponent } from 'vue';
   import { HistoryQuery } from '@empathyco/x-types';
   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 } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * History Queries Switch is a component to activate or deactivate the history queries.
@@ -18,49 +17,55 @@
    *
    * @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() {
+      const $x = use$x();
+
+      /**
+       * An object with the isEnabled value and the history queries coming from the store state.
+       *
+       * @internal
+       */
+      const { isEnabled, historyQueries } = useState('historyQueries', [
+        'isEnabled',
+        'historyQueries'
+      ]);
+
+      /**
+       * Checks if there are history queries.
+       *
+       * @returns True if there are history queries; false otherwise.
+       */
+      const hasHistoryQueries = computed(
+        () => !isArrayEmpty(historyQueries.value as HistoryQuery[])
+      );
 
-    /**
-     * Emits an event based on the switch state.
-     *
-     * @internal
-     */
-    protected toggle(): void {
-      this.$x.emit(
-        this.isEnabled
-          ? this.hasHistoryQueries
-            ? 'UserClickedDisableHistoryQueries'
-            : 'UserClickedConfirmDisableHistoryQueries'
-          : 'UserClickedEnableHistoryQueries'
+      const disableEvent = computed(() =>
+        hasHistoryQueries.value
+          ? 'UserClickedDisableHistoryQueries'
+          : 'UserClickedConfirmDisableHistoryQueries'
       );
+
+      /**
+       * Emits an event based on the switch state.
+       *
+       * @internal
+       */
+      const toggle = (): void => {
+        $x.emit(isEnabled.value ? disableEvent.value : '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..1243fc01f6 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
@@ -1,7 +1,7 @@
 <template>
   <BaseSuggestions
     v-bind="$attrs"
-    :suggestions="historyQueries"
+    :suggestions="historyQueriesWithResults"
     class="x-history-queries"
     data-test="history-queries"
   >
@@ -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 } from '../../../composables/use-getter';
   import HistoryQuery from './history-query.vue';
 
   /**
@@ -63,20 +60,29 @@
    *
    * @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() {
+      /**
+       * The filtered list of history queries.
+       *
+       * @internal
+       */
+      const { historyQueriesWithResults } = useGetter('historyQueries', [
+        'historyQueriesWithResults'
+      ]);
+
+      return {
+        historyQueriesWithResults
+      };
+    }
+  });
 </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..e3450665c0 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
@@ -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 } from '../../../composables/use-getter';
   import RemoveHistoryQuery from './remove-history-query.vue';
 
   /**
@@ -57,41 +54,52 @@
    *
    * @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) {
+      /**
+       * 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> => ({
+          UserSelectedAHistoryQuery: props.suggestion
+        })
+      );
+
       return {
-        UserSelectedAHistoryQuery: this.suggestion
+        query,
+        suggestionSelectedEvents
       };
     }
-  }
+  });
 </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..c789d4a3bd 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
@@ -57,18 +57,16 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery } from '@empathyco/x-types';
+  import { HistoryQuery as HistoryQueryType } 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 HistoryQueryComponent from './history-query.vue';
+  import { AnimationProp } from '../../../types/index';
+  import { useState } from '../../../composables/use-state';
+  import HistoryQuery from './history-query.vue';
 
   /**
    * The component renders the full history of user searched queries grouped by the day
@@ -81,117 +79,131 @@
    * 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,
+      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) {
+      /**
+       * The list of history queries.
+       *
+       * @internal
+       */
+      const { historyQueries } = useState('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(() => snippetConfig?.lang ?? props.locale);
+
+      /**
+       * 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<HistoryQueryType[]> => {
+        return groupItemsBy(historyQueries.value as HistoryQueryType[], 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
-     */
-    protected formatTime(timestamp: number): string {
-      return new Date(timestamp).toLocaleTimeString(this.usedLocale, {
-        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
-     */
-    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;
+      /**
+       * 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 as HistoryQueryType[])
+      );
+
+      return {
+        hasHistoryQueries,
+        groupByDate,
+        historyQueries,
+        formatTime
+      };
     }
-  }
+  });
 </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..54b15f8add 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,10 +11,8 @@
 
 <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';
 
@@ -25,32 +23,42 @@
    *
    * @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) {
+      /**
+       * 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> => ({ UserPressedRemoveHistoryQuery: props.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
-     */
-    protected get removeHistoryQueryEvent(): Partial<XEventsTypes> {
-      return { UserPressedRemoveHistoryQuery: this.historyQuery };
+      return {
+        removeHistoryQueryEvent
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/history-queries/x-module.ts b/packages/x-components/src/x-modules/history-queries/x-module.ts
index 76e8a50e83..6d5b90e982 100644
--- a/packages/x-components/src/x-modules/history-queries/x-module.ts
+++ b/packages/x-components/src/x-modules/history-queries/x-module.ts
@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { historyQueriesEmitters } from './store/emitters';
 import { historyQueriesXStoreModule } from './store/module';
@@ -23,3 +24,5 @@ export const historyQueriesXModule: HistoryQueriesXModule = {
   storeEmitters: historyQueriesEmitters,
   wiring: historyQueriesWiring
 };
+
+XPlugin.registerXModule(historyQueriesXModule);