diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
index 5376cdff4c..a226e19003 100644
--- a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
+++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
@@ -40,7 +40,7 @@ describe('testing extra params component', () => {
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 1234 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(1);
 
@@ -48,7 +48,7 @@ describe('testing extra params component', () => {
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 5678 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(2);
   });
diff --git a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
index d24dc6301e..3e4234bff5 100644
--- a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { State, xComponentMixin, XEmit } from '../../../components';
+  import { defineComponent, watch } from 'vue';
   import { extraParamsXModule } from '../x-module';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values
@@ -11,40 +11,32 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(extraParamsXModule)]
-  })
-  export default class ExtraParams extends Vue {
-    /**
-     * Emits the initial extra params, overriding with the state extra params, just in case, those
-     * values were already set by XComponents initialization (url, plugin config, etc.).
-     */
-    created(): void {
-      this.$x.emit('ExtraParamsInitialized', { ...this.values });
-      this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });
-    }
 
-    /**
-     * (Required) A Dictionary where the keys are the extra param names and its values.
-     *
-     * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the
-     * component is rendered or the values changed.
-     *
-     * @public
-     */
-    @XEmit('ExtraParamsProvided', { immediate: false, deep: true })
-    @Prop({ required: true })
-    public values!: Dictionary<unknown>;
+  export default defineComponent({
+    name: 'ExtraParams',
+    xModule: extraParamsXModule.name,
+    props: {
+      values: {
+        type: Object as () => Dictionary<unknown>,
+        required: true
+      }
+    },
+    setup(props) {
+      const { params } = useState('extraParams', ['params']);
+      const $x = use$x();
 
-    /**
-     * State extra params. Used to override the initial extra params.
-     */
-    @State('extraParams', 'params')
-    public storeExtraParams!: Dictionary<unknown>;
+      $x.emit('ExtraParamsInitialized', { ...props.values });
+      $x.emit('ExtraParamsProvided', { ...props.values, ...params.value });
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+      watch(
+        () => props.values,
+        values => {
+          $x.emit('ExtraParamsProvided', { ...values });
+        },
+        { deep: true }
+      );
+    }
+  });
 </script>
 
 <docs lang="mdx">