diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 72e30f228b..f56966b4d8 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -6,7 +6,14 @@ import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tag
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import App from './App.vue';
 import router from './router';
-import { facetsXModule, nextQueriesXModule, scrollXModule, searchXModule } from './';
+import {
+  facetsXModule,
+  nextQueriesXModule,
+  queriesPreviewXModule,
+  scrollXModule,
+  searchXModule,
+  semanticQueriesXModule
+} from './';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
@@ -51,7 +58,9 @@ createApp(App as Component)
       facets: facetsXModule,
       nextQueries: nextQueriesXModule,
       scroll: scrollXModule,
-      search: searchXModule
+      search: searchXModule,
+      queriesPreview: queriesPreviewXModule,
+      semanticQueries: semanticQueriesXModule
     }
   })
   .mount('#app');
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 082ac05f28..6c5977b1a0 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -33,7 +33,8 @@ import {
   TestPartialResultsList,
   TestBaseEventsModal,
   TestBaseIdModal,
-  TestQuerySuggestions
+  TestQuerySuggestions,
+  TestSemanticQueries
 } from './';
 
 const routes = [
@@ -144,7 +145,7 @@ const routes = [
   },
   {
     path: '/test-use-layouts',
-    name: 'TestUseLayouts',
+    name: 'UseLayouts',
     component: TestUseLayouts
   },
   {
@@ -174,12 +175,12 @@ const routes = [
   },
   {
     path: '/test-base-panel',
-    name: 'TestBasePanel',
+    name: 'BasePanel',
     component: TestBasePanel
   },
   {
     path: '/base-keyboard-navigation',
-    name: 'TestBaseKeyboardNavigation',
+    name: 'BaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
   },
   {
@@ -199,13 +200,18 @@ const routes = [
   },
   {
     path: '/test-base-id-modal',
-    name: 'TestBaseIdModal',
+    name: 'BaseIdModal',
     component: TestBaseIdModal
   },
   {
     path: '/query-suggestions',
     name: 'QuerySuggestions',
     component: TestQuerySuggestions
+  },
+  {
+    path: '/test-semantic-queries',
+    name: 'SemanticQueries',
+    component: TestSemanticQueries
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index f0dcd3688d..a1fae1bb89 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -8,3 +8,4 @@ export * from './scroll';
 export * from './related-tags';
 export * from './history-queries';
 export * from './query-suggestions';
+export * from './semantic-queries';
diff --git a/packages/_vue3-migration-test/src/x-modules/semantic-queries/components/test-semantic-queries.vue b/packages/_vue3-migration-test/src/x-modules/semantic-queries/components/test-semantic-queries.vue
new file mode 100644
index 0000000000..14b89dc0cd
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/semantic-queries/components/test-semantic-queries.vue
@@ -0,0 +1,23 @@
+<template>
+  <SemanticQueries #default="{ suggestions, findSemanticQuery }">
+    <QueryPreviewList
+      :queriesPreviewInfo="suggestions"
+      #default="{ queryPreviewInfo: { query }, totalResults, results }"
+    >
+      <div>
+        <SemanticQuery :suggestion="findSemanticQuery(query)">
+          <span>{{ query }} ({{ totalResults }})</span>
+        </SemanticQuery>
+        <ul v-for="result in results" :key="result.id">
+          <li>{{ result.id }}</li>
+        </ul>
+      </div>
+    </QueryPreviewList>
+  </SemanticQueries>
+</template>
+
+<script setup>
+  import SemanticQueries from '../../../../../x-components/src/x-modules/semantic-queries/components/semantic-queries.vue';
+  import QueryPreviewList from '../../../../../x-components/src/x-modules/queries-preview/components/query-preview-list.vue';
+  import SemanticQuery from '../../../../../x-components/src/x-modules/semantic-queries/components/semantic-query.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/x-modules/semantic-queries/index.ts b/packages/_vue3-migration-test/src/x-modules/semantic-queries/index.ts
new file mode 100644
index 0000000000..45310f849c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/semantic-queries/index.ts
@@ -0,0 +1,2 @@
+export { default as TestSemanticQueries } from './components/test-semantic-queries.vue';
+export * from './x-module';
diff --git a/packages/_vue3-migration-test/src/x-modules/semantic-queries/x-module.ts b/packages/_vue3-migration-test/src/x-modules/semantic-queries/x-module.ts
new file mode 100644
index 0000000000..a716162870
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/semantic-queries/x-module.ts
@@ -0,0 +1,31 @@
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
+import { SemanticQueriesXModule } from '../../../../x-components/src/x-modules/semantic-queries/x-module';
+import { QueriesPreviewXModule } from '../../../../x-components/src/x-modules/queries-preview/x-module';
+import { getResultsStub } from '../../../../x-components/src/__stubs__/results-stubs.factory';
+
+export const semanticQueriesXModule: PrivateXModuleOptions<SemanticQueriesXModule> = {
+  storeModule: {
+    state: {
+      config: { threshold: 5 },
+      semanticQueries: [{ query: 'prueba', distance: 0 }],
+      query: 'jeans',
+      totalResults: 4
+    }
+  }
+};
+
+export const queriesPreviewXModule: PrivateXModuleOptions<QueriesPreviewXModule> = {
+  storeModule: {
+    state: {
+      queriesPreview: {
+        c893bad68927b457dbed39460e6afd62: {
+          request: { query: 'prueba' },
+          results: getResultsStub(4),
+          status: 'success',
+          instances: 1,
+          totalResults: 4
+        }
+      }
+    }
+  }
+};
diff --git a/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-queries.spec.ts b/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-queries.spec.ts
index 9e9095ded5..b7bd09afea 100644
--- a/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-queries.spec.ts
+++ b/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-queries.spec.ts
@@ -1,8 +1,6 @@
-import { Wrapper, mount, createLocalVue } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils/src/types/utils.types';
-import { SemanticQuery } from '@empathyco/x-types';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import SemanticQueries from '../semantic-queries.vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
@@ -11,30 +9,23 @@ import { createSemanticQuery } from '../../../../__stubs__/semantic-queries-stub
 import { resetSemanticQueriesStateWith } from './utils';
 
 function renderSemanticQueriesList({
-  template = `
-    <SemanticQueries v-bind="$attrs"/>
-  `,
+  template = `<SemanticQueries v-bind="$attrs"/>`,
   semanticQueries = [
     createSemanticQuery({ query: 'test', distance: 1 }),
     createSemanticQuery({ query: 'test 2', distance: 2 })
   ],
   threshold = 5,
-  maxItemsToRender
-}: RenderSemanticQueriesListOptions = {}): RenderSemanticQueriesListAPI {
+  maxItemsToRender = 5
+} = {}) {
   const localVue = createLocalVue();
   localVue.use(Vuex);
-
   const store = new Store<DeepPartial<RootXStoreState>>({});
 
   installNewXPlugin(
     {
       store,
       xModules: {
-        semanticQueries: {
-          config: {
-            threshold
-          }
-        }
+        semanticQueries: { config: { threshold } }
       }
     },
     localVue
@@ -44,9 +35,7 @@ function renderSemanticQueriesList({
   const wrapper = mount(
     {
       template,
-      components: {
-        SemanticQueries
-      }
+      components: { SemanticQueries }
     },
     {
       localVue,
@@ -55,13 +44,14 @@ function renderSemanticQueriesList({
     }
   );
 
-  return { wrapper: wrapper.findComponent(SemanticQueries) };
+  return { wrapper: wrapper.findComponent(SemanticQueries) } as const;
 }
 
 describe('testing SemanticQueries', () => {
   it('is an X Component that belongs to the semantic queries module', () => {
     const { wrapper } = renderSemanticQueriesList();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
+
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('semanticQueries');
   });
 
@@ -131,7 +121,6 @@ describe('testing SemanticQueries', () => {
     expect(wrappers.at(1)?.text()).toEqual('test 2 - 1');
   });
 
-  // eslint-disable-next-line max-len
   it('exposes an array of queries and a method to find the semantic query in its default slot', () => {
     const { wrapper } = renderSemanticQueriesList({
       template: `
@@ -177,8 +166,7 @@ describe('testing SemanticQueries', () => {
           <span data-test="semantic-query-item-content">
             {{ suggestion.query }} - {{ suggestion.distance }}
           </span>
-        </SemanticQueries>
-      `,
+        </SemanticQueries>`,
       semanticQueries: [
         createSemanticQuery({ query: 'test 1', distance: 1 }),
         createSemanticQuery({ query: 'test 2', distance: 2 })
@@ -192,25 +180,3 @@ describe('testing SemanticQueries', () => {
     expect(wrappers.at(1)?.text()).toEqual('test 2 - 2');
   });
 });
-
-/**
- * The options to render the {@link SemanticQueries} component.
- */
-interface RenderSemanticQueriesListOptions {
-  /* The template to render the component. */
-  template?: string;
-  /* The semantic queries to render. */
-  semanticQueries?: SemanticQuery[];
-  /* The max number of results to show the semantic queries. */
-  threshold?: number;
-  /* The max number of semantic queries to render. */
-  maxItemsToRender?: number;
-}
-
-/**
- * The API to test the {@link SemanticQueries} component.
- */
-interface RenderSemanticQueriesListAPI {
-  /* The testing wrapper of the {@link SemanticQueries) component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-query.spec.ts b/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-query.spec.ts
index f5dc66d339..ce880abc8b 100644
--- a/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-query.spec.ts
+++ b/packages/x-components/src/x-modules/semantic-queries/components/__tests__/semantic-query.spec.ts
@@ -1,6 +1,4 @@
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types';
+import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
 import { DeepPartial } from '@empathyco/x-utils';
 import SemanticQuery from '../semantic-query.vue';
@@ -12,47 +10,43 @@ import { RootXStoreState } from '../../../../store/store.types';
 import { semanticQueriesXModule } from '../../x-module';
 import { resetSemanticQueriesStateWith } from './utils';
 
-describe('semantic queries component', () => {
-  function renderSemanticQuery({
-    template = '<SemanticQuery :suggestion="suggestion" v-bind="$attrs"/>',
-    suggestion = createSemanticQuery({ query: 'jeans' }),
-    query = ''
-  }: RenderSemanticQueryOptions = {}): RenderSemanticQueryAPI {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
-
-    const store = new Store<DeepPartial<RootXStoreState>>({});
+function renderSemanticQuery({
+  template = '<SemanticQuery :suggestion="suggestion" v-bind="$attrs"/>',
+  suggestion = createSemanticQuery({ query: 'jeans' }),
+  query = ''
+} = {}) {
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
+  const store = new Store<DeepPartial<RootXStoreState>>({});
 
-    installNewXPlugin({ store, initialXModules: [semanticQueriesXModule] }, localVue);
-    resetSemanticQueriesStateWith(store, { query });
+  installNewXPlugin({ store, initialXModules: [semanticQueriesXModule] }, localVue);
+  resetSemanticQueriesStateWith(store, { query });
 
-    const wrapper = mount(
-      {
-        template,
-        components: { SemanticQuery }
-      },
-      {
-        localVue,
-        store,
-        data() {
-          return {
-            suggestion
-          };
-        }
-      }
-    );
+  const wrapper = mount(
+    {
+      template,
+      components: { SemanticQuery }
+    },
+    {
+      localVue,
+      store,
+      data: () => ({ suggestion })
+    }
+  );
 
-    return {
-      wrapper: wrapper.findComponent(SemanticQuery),
-      emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
-      suggestion
-    };
-  }
+  return {
+    wrapper: wrapper.findComponent(SemanticQuery),
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
+    suggestion
+  } as const;
+}
 
+describe('semantic queries component', () => {
   it('is an X Component of the Semantic Queries XModule', () => {
     const { wrapper } = renderSemanticQuery();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-    expect(getXComponentXModuleName(wrapper.vm)).toBe('semanticQueries');
+
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
+    expect(getXComponentXModuleName(wrapper.vm)).toEqual('semanticQueries');
   });
 
   it('renders the SemanticQuery passed by prop', () => {
@@ -71,8 +65,7 @@ describe('semantic queries component', () => {
         <SemanticQuery :suggestion="suggestion" #default="{ suggestion, query }">
           <span data-test="state-query">{{ query }}</span>
           <span data-test="semantic-query-content">{{ suggestion.query }}</span>
-        </SemanticQuery>
-      `,
+        </SemanticQuery>`,
       suggestion: createSemanticQuery({ query: 'blazer' }),
       query: 'jacket'
     });
@@ -109,27 +102,3 @@ describe('semantic queries component', () => {
     );
   });
 });
-
-/**
- * The options to render the {@link SemanticQuery} component.
- */
-interface RenderSemanticQueryOptions {
-  /* The template to render the component. */
-  template?: string;
-  /* The semantic query to render. */
-  suggestion?: SemanticQueryModel;
-  /* The query from the semantic queries state. */
-  query?: string;
-}
-
-/**
- * The API to test the {@link SemanticQuery} component.
- */
-interface RenderSemanticQueryAPI {
-  /* The testing wrapper of the {@link SemanticQuery} component. */
-  wrapper: Wrapper<Vue>;
-  /* A jest spy of the X emit method. */
-  emitSpy: ReturnType<typeof jest.spyOn>;
-  /* The rendered semantic query. */
-  suggestion: SemanticQueryModel;
-}
diff --git a/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue b/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue
index af89b51114..b2f345b75b 100644
--- a/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue
+++ b/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue
@@ -41,14 +41,12 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { computed, ComputedRef, defineComponent } from 'vue';
   import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { semanticQueriesXModule } from '../x-module';
   import { NoElement } from '../../../components/no-element';
-  import { State } from '../../../components';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
+  import { useState } from '../../../composables/use-state';
   import SemanticQuery from './semantic-query.vue';
 
   /**
@@ -56,39 +54,35 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'SemanticQueries',
+    xModule: semanticQueriesXModule.name,
+    components: { BaseSuggestions, NoElement, SemanticQuery },
     inheritAttrs: false,
-    mixins: [xComponentMixin(semanticQueriesXModule)],
-    components: { BaseSuggestions, NoElement, SemanticQuery }
-  })
-  export default class SemanticQueries extends Vue {
-    /**
-     * The semantic queries from the state.
-     */
-    @State('semanticQueries', 'semanticQueries')
-    public suggestions!: SemanticQueryModel[];
-
-    /**
-     * Maps the list of semantic queries to a list of queries, to make it compatible with
-     * other components.
-     *
-     * @returns A list of queries.
-     * @internal
-     */
-    public get queries(): string[] {
-      return this.suggestions.map(suggestion => suggestion.query);
+    setup() {
+      /** The semantic queries from the state. */
+      const suggestions: ComputedRef<SemanticQueryModel[]> = useState('semanticQueries', [
+        'semanticQueries'
+      ]).semanticQueries;
+
+      /**
+       * Maps the list of semantic queries to a list of queries, to make it compatible with
+       * other components.
+       */
+      const queries = computed(() => suggestions.value.map(suggestion => suggestion.query));
+
+      /**
+       * Finds a {@link @empathyco/x-types#SemanticQuery} given a query.
+       *
+       * @param query - The query to search.
+       * @returns The {@link @empathyco/x-types#SemanticQuery} or undefined if not found.
+       */
+      const findSemanticQuery = (query: string) =>
+        suggestions.value.find(suggestion => suggestion.query === query);
+
+      return { suggestions, queries, findSemanticQuery };
     }
-
-    /**
-     * Finds a {@link @empathyco/x-types#SemanticQuery} given a query.
-     *
-     * @param query - The query to search.
-     * @returns The {@link @empathyco/x-types#SemanticQuery} or undefined if not found.
-     */
-    findSemanticQuery(query: string): SemanticQueryModel | undefined {
-      return this.suggestions.find(suggestion => suggestion.query === query);
-    }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/semantic-queries/components/semantic-query.vue b/packages/x-components/src/x-modules/semantic-queries/components/semantic-query.vue
index fa5e64ee0b..a8c47412be 100644
--- a/packages/x-components/src/x-modules/semantic-queries/components/semantic-query.vue
+++ b/packages/x-components/src/x-modules/semantic-queries/components/semantic-query.vue
@@ -1,6 +1,8 @@
 <template>
   <BaseSuggestion
-    v-bind="{ suggestionSelectedEvents, suggestion, query }"
+    :query="query"
+    :suggestion="suggestion"
+    :suggestionSelectedEvents="suggestionSelectedEvents"
     feature="semantics"
     data-test="semantic-query"
     #default="baseScope"
@@ -16,13 +18,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types';
-  import { Getter, xComponentMixin } from '../../../components';
+  import { defineComponent, PropType } from 'vue';
+  import { SemanticQuery } from '@empathyco/x-types';
   import { semanticQueriesXModule } from '../x-module';
   import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';
-  import { XEventsTypes } from '../../../wiring';
+  import { useGetter } from '../../../composables/use-getter';
 
   /**
    * This component renders a semantic query. A semantic query is a recommended query
@@ -32,35 +32,32 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'SemanticQuery',
+    xModule: semanticQueriesXModule.name,
     components: { BaseSuggestion },
-    mixins: [xComponentMixin(semanticQueriesXModule)]
-  })
-  export default class SemanticQuery extends Vue {
-    /**
-     * The normalized query of the semantic queries module.
-     */
-    @Getter('semanticQueries', 'normalizedQuery')
-    public query!: string;
-
-    /**
-     * The {@link @empathyco/x-types#SemanticQuery} to render.
-     */
-    @Prop()
-    public suggestion!: SemanticQueryModel;
-
-    /**
-     * The list of events that are going to be emitted when the button is pressed.
-     *
-     * @internal
-     * @returns The {@link XEvent} to emit.
-     */
-    protected get suggestionSelectedEvents(): Partial<XEventsTypes> {
+    props: {
+      /** The {@link @empathyco/x-types#SemanticQuery} to render. */
+      suggestion: {
+        type: Object as PropType<SemanticQuery>,
+        required: true
+      }
+    },
+    setup(props) {
+      /** The normalized query of the semantic queries module. */
+      const query = useGetter('semanticQueries', ['normalizedQuery']).normalizedQuery;
+
+      /** The list of events that are going to be emitted when the button is pressed. */
+      const suggestionSelectedEvents = {
+        UserSelectedASemanticQuery: props.suggestion
+      };
+
       return {
-        UserSelectedASemanticQuery: this.suggestion
+        query,
+        suggestionSelectedEvents
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/semantic-queries/x-module.ts b/packages/x-components/src/x-modules/semantic-queries/x-module.ts
index 8eb7caf060..b29ac3c3d6 100644
--- a/packages/x-components/src/x-modules/semantic-queries/x-module.ts
+++ b/packages/x-components/src/x-modules/semantic-queries/x-module.ts
@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin';
 import { XModule } from '../x-modules.types';
 import { semanticQueriesEmitters } from './store/emitters';
 import { semanticQueriesXStoreModule } from './store/module';
@@ -23,3 +24,5 @@ export const semanticQueriesXModule: SemanticQueriesXModule = {
   storeEmitters: semanticQueriesEmitters,
   wiring: semanticQueriesWiring
 };
+
+XPlugin.registerXModule(semanticQueriesXModule);