diff --git a/components/bsx/Offer/OfferTable.vue b/components/bsx/Offer/OfferTable.vue
index abcd5019a2..cc3fd42f79 100644
--- a/components/bsx/Offer/OfferTable.vue
+++ b/components/bsx/Offer/OfferTable.vue
@@ -177,6 +177,7 @@ withDefaults(
 const { $route } = useNuxtApp()
 const { urlPrefix, tokenId } = usePrefix()
 const { accountId } = useAuth()
+const { replaceUrl } = useReplaceUrl()
 
 const itemsPerPage = ref(20)
 const currentPage = ref(parseInt($route.query?.page as string) || 1)
@@ -188,21 +189,9 @@ const tellFrens = (caller: string, withdraw: boolean) => {
 }
 
 watch(currentPage, (val) => {
-  replaceUrl(String(val))
+  replaceUrl({ page: String(val) })
 })
 
-const replaceUrl = (value: string, key = 'page') => {
-  const { $route, $router, $consola } = useNuxtApp()
-  if ($route.query[key] !== value) {
-    $router
-      .replace({
-        path: String($route.path),
-        query: { ...$route.query, [key]: value },
-      })
-      .catch($consola.warn /*Navigation Duplicate err fix later */)
-  }
-}
-
 const currentBlock = ref(async () => {
   const { apiInstance } = useApi()
   const api = await apiInstance.value
diff --git a/components/rmrk/Gallery/EmotionList.vue b/components/rmrk/Gallery/EmotionList.vue
index e418a50f4d..46bdfda4a9 100644
--- a/components/rmrk/Gallery/EmotionList.vue
+++ b/components/rmrk/Gallery/EmotionList.vue
@@ -3,7 +3,7 @@
     <NeoButton
       v-for="emoji in emotes.slice(0, DISPLAYED_EMOJI)"
       :key="emoji.key"
-      variant="is-outlined"
+      variant="secondary"
       no-shadow
       class="emoji-box mb-2"
       @click.native="$emit('selected', emoji.parsed)">
@@ -28,77 +28,60 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Provide, Vue } from 'nuxt-property-decorator'
+<script lang="ts" setup>
 import orderBy from 'lodash/orderBy'
 
 import { Emotion } from '../service/scheme'
 import EmotionModal from './EmotionModal.vue'
 import { NeoButton, NeoIcon, NeoTooltip } from '@kodadot1/brick'
+import Identity from '@/components/identity/IdentityIndex.vue'
 
 const issuerId = (emotion: Emotion) => emotion.caller
+const DISPLAYED_EMOJI = 5
+const { $buefy } = useNuxtApp()
+const instance = getCurrentInstance()
 
-interface GroupedEmotion {
-  [x: string]: Emotion[]
-}
-
-interface Emoji {
-  key: string
-  count: number
-  issuers: string[]
-  parsed: string
-}
+const props = defineProps<{
+  emotions: []
+}>()
 
-@Component({
-  components: {
-    Identity: () => import('@/components/identity/IdentityIndex.vue'),
-    NeoIcon,
-    NeoTooltip,
-    NeoButton,
-  },
-})
-export default class EmotionList extends Vue {
-  @Prop() public emotions!: GroupedEmotion
-  @Provide() DISPLAYED_EMOJI = 5
-
-  /**
-   * parse emoji from codepoint to emoji
-   * @param codepoint Emoji Codepoint
-   * @returns Emoticon 👨🏻‍🌾
-   */
-  parseEmoji(codepoint): string {
-    if (codepoint) {
-      const toInt = codepoint.split('-').map((code) => parseInt(code, 16))
-      return String.fromCodePoint.apply(String, toInt)
-    }
-
-    return ''
+/**
+ * parse emoji from codepoint to emoji
+ * @param codepoint Emoji Codepoint
+ * @returns Emoticon 👨🏻‍🌾
+ */
+const parseEmoji = (codepoint): string => {
+  if (codepoint) {
+    const toInt = codepoint.split('-').map((code) => parseInt(code, 16))
+    return String.fromCodePoint.apply(String, toInt)
   }
 
-  openEmotionModal(): void {
-    this.$buefy.modal.open({
-      parent: this,
-      component: EmotionModal,
-      canCancel: ['escape', 'outside'],
-      hasModalCard: true,
-      props: {
-        emotes: this.emotes,
-      },
-    })
-  }
-
-  get emotes(): Emoji[] {
-    const mapping = Object.entries(this.emotions).map(([key, emotions]) => ({
-      key,
-      count: emotions.length,
-      issuers: emotions.map(issuerId),
-      parsed: this.parseEmoji(key),
-    }))
-    const orderByCount = orderBy(mapping, ['count'], ['desc'])
+  return ''
+}
 
-    return orderByCount
-  }
+const openEmotionModal = () => {
+  $buefy.modal.open({
+    parent: instance?.proxy,
+    component: EmotionModal,
+    canCancel: ['escape', 'outside'],
+    hasModalCard: true,
+    props: {
+      emotes: emotes.value,
+    },
+  })
 }
+
+const emotes = computed(() => {
+  const mapping = Object.entries(props.emotions).map(([key, emotions]) => ({
+    key,
+    count: emotions.length,
+    issuers: emotions.map(issuerId),
+    parsed: parseEmoji(key),
+  }))
+  const orderByCount = orderBy(mapping, ['count'], ['desc'])
+
+  return orderByCount
+})
 </script>
 
 <style lang="scss">
diff --git a/components/rmrk/Gallery/History.vue b/components/rmrk/Gallery/History.vue
index e59bafd5da..334aa13f3e 100644
--- a/components/rmrk/Gallery/History.vue
+++ b/components/rmrk/Gallery/History.vue
@@ -74,7 +74,7 @@
         field="Percentage"
         label="Percentage">
         <span :class="percentageTextClassName(props.row.Percentage)">
-          {{ props.row.Percentage | toPercent('-') }}
+          {{ toPercent(props.row.Percentage, '-') }}
         </span>
       </NeoTableColumn>
       <NeoTableColumn v-slot="props" field="Date" label="Date">
@@ -88,17 +88,12 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Watch, mixins } from 'nuxt-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
+<script lang="ts" setup>
 import { Interaction } from '@kodadot1/minimark/v1'
 import { formatDistanceToNow } from 'date-fns'
 
 import { exist } from '@/utils/exist'
-
-import ChainMixin from '@/utils/mixins/chainMixin'
-import KeyboardEventsMixin from '@/utils/mixins/keyboardEventsMixin'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
+import { toPercent } from '@/utils/filters'
 import { usePreferencesStore } from '@/stores/preferences'
 
 import {
@@ -108,287 +103,225 @@ import {
   parseDate,
   wrapEventNameWithIcon,
 } from '@/utils/historyEvent'
-import shortAddress from '@/utils/shortAddress'
 
 import { Interaction as EventInteraction } from '../service/scheme'
 import {
-  NeoIcon,
   NeoSelect,
   NeoTable,
   NeoTableColumn,
   NeoTooltip,
 } from '@kodadot1/brick'
 
-const components = {
-  Identity: () => import('@/components/identity/IdentityIndex.vue'),
-  Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
-  BlockExplorerLink: () => import('@/components/shared/BlockExplorerLink.vue'),
-  CommonTokenMoney: () => import('@/components/shared/CommonTokenMoney.vue'),
-  NeoIcon,
-  NeoTable,
-  NeoTableColumn,
-  NeoTooltip,
-  NeoSelect,
-}
-
-type TableRowItem = {
-  id: string
-  name: string
-}
-
-type TableRow = {
-  Type: HistoryEventType
-  Item?: TableRowItem // only in collection
-  From: string
-  To: string
-  Amount: string
-  Date: string
-  Block: string
-}
+import Identity from '@/components/identity/IdentityIndex.vue'
+import Pagination from '@/components/rmrk/Gallery/Pagination.vue'
+import BlockExplorerLink from '@/components/shared/BlockExplorerLink.vue'
+import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 
 type ChartData = {
   buy: any[]
   list: any[]
 }
-
-@Component({ components })
-export default class History extends mixins(
-  PrefixMixin,
-  ChainMixin,
-  KeyboardEventsMixin
-) {
-  @Prop({ type: Array }) public events!: EventInteraction[]
-  @Prop({ type: Boolean, default: true })
-  private readonly openOnDefault!: boolean
-  @Prop({ type: Boolean, default: false }) hideCollapse!: boolean
-  @Prop({ type: Boolean, default: false }) displayItem!: boolean
-
-  private currentPage = parseInt(this.$route.query?.page as string) || 1
-  private event: HistoryEventType = HistoryEventType.BUY
-
-  protected data: TableRow[] = []
-  protected copyTableData: TableRow[] = []
-  public isOpen = false
-  public shortAddress = shortAddress
-  private preferencesStore = usePreferencesStore()
-
-  public async created() {
-    this.initKeyboardEventHandler({
-      e: this.bindExpandEvents,
-    })
-  }
-
-  public mounted() {
-    exist(this.$route.query.event, (val) => {
-      this.event = (val as HistoryEventType) ?? HistoryEventType.ALL
-    })
-    this.isOpen = this.openOnDefault
+const prop = withDefaults(
+  defineProps<{
+    events?: EventInteraction[]
+    openOnDefault?: boolean
+    hideCollapse?: boolean
+    displayItem?: boolean
+  }>(),
+  {
+    events: () => [],
+    openOnDefault: true,
+    hideCollapse: false,
+    displayItem: false,
   }
-
-  private bindExpandEvents(event) {
-    if (event.key === 'h') {
-      this.isOpen = !this.isOpen
+)
+const emit = defineEmits(['setPriceChartData'])
+
+const { $i18n, $route } = useNuxtApp()
+const { decimals } = useChain()
+const { urlPrefix } = usePrefix()
+const { replaceUrl } = useReplaceUrl()
+
+const currentPage = ref(parseInt($route.query?.page) || 1)
+const event = ref<HistoryEventType>(HistoryEventType.BUY)
+const data = ref([])
+const copyTableData = ref([])
+const isOpen = ref(false)
+const preferencesStore = usePreferencesStore()
+
+onMounted(() => {
+  exist($route.query.event, (val) => {
+    event.value = (val as HistoryEventType) ?? HistoryEventType.ALL
+  })
+  isOpen.value = prop.openOnDefault
+})
+
+const total = computed(() => data.value.length)
+const itemsPerPage = computed(() => preferencesStore.getHistoryItemsPerPage)
+const showList = computed(() => {
+  const endIndex = currentPage.value * itemsPerPage.value
+  return data.value.slice(endIndex - itemsPerPage.value, endIndex)
+})
+const uniqType = computed(() => {
+  const eventSet = new Set(copyTableData.value.map((v) => v.Type))
+  const singleEventList = Array.from(eventSet).map((type) => ({
+    type,
+    value: getEventDisplayName(type as Interaction),
+  }))
+  return [{ type: HistoryEventType.ALL, value: 'All' }, ...singleEventList]
+})
+const isToColumnVisible = computed(() => {
+  return [HistoryEventType.ALL, Interaction.BUY, Interaction.SEND].includes(
+    event.value
+  )
+})
+const isPercentageColumnVisible = computed(() => {
+  return [HistoryEventType.ALL, Interaction.BUY].includes(event.value)
+})
+const selectedEvent = computed({
+  get: () => event.value,
+  set: (value: HistoryEventType) => {
+    if (value) {
+      currentPage.value = 1
+      event.value = value
+      replaceUrl({ event: value })
     }
-  }
+  },
+})
 
-  get total(): number {
-    return this.data.length
-  }
-
-  get itemsPerPage(): number {
-    return this.preferencesStore.getHistoryItemsPerPage
-  }
+const getEventDisplayName = (type: Interaction) => {
+  return wrapEventNameWithIcon(type, $i18n.t(`nft.event.${type}`) as string)
+}
 
-  get showList(): TableRow[] {
-    const endIndex = this.currentPage * this.itemsPerPage
-    return this.data.slice(endIndex - this.itemsPerPage, endIndex)
+const percentageTextClassName = (percentage: number) => {
+  if (percentage > 0) {
+    return 'has-text-success'
+  } else if (percentage < 0) {
+    return 'has-text-danger'
   }
+  return ''
+}
 
-  getEventDisplayName(type: Interaction) {
-    return wrapEventNameWithIcon(type, this.$t(`nft.event.${type}`) as string)
-  }
+const updateDataByEvent = () => {
+  data.value =
+    event.value === HistoryEventType.ALL
+      ? copyTableData.value
+      : [...new Set(copyTableData.value.filter((v) => v.Type === event))]
+}
 
-  get uniqType(): { type: HistoryEventType; value: string }[] {
-    const eventSet = new Set(this.copyTableData.map((v) => v.Type))
-    const singleEventList = Array.from(eventSet).map((type) => ({
-      type,
-      value: this.getEventDisplayName(type as Interaction),
-    }))
-    return [{ type: HistoryEventType.ALL, value: 'All' }, ...singleEventList]
-  }
+const pushChartData = (array, date, amount) => {
+  array.push([date, parseChartAmount(amount, decimals.value)])
+}
 
-  get isToColumnVisible() {
-    return [HistoryEventType.ALL, Interaction.BUY, Interaction.SEND].includes(
-      this.event
-    )
-  }
+const createTable = (): void => {
+  data.value = []
+  copyTableData.value = []
 
-  get isPercentageColumnVisible() {
-    return [HistoryEventType.ALL, Interaction.BUY].includes(this.event)
+  const chartData: ChartData = {
+    buy: [],
+    list: [],
   }
+  const previousPriceMap = {}
+
+  for (const newEvent of prop.events) {
+    const event: any = {}
+
+    const nftId = newEvent['nft'] ? newEvent['nft']['id'] : 'id'
+    // Type
+    switch (newEvent['interaction']) {
+      case Interaction.MINTNFT:
+        event['From'] = newEvent['caller']
+        event['To'] = ''
+        break
+      case Interaction.LIST:
+      case Interaction.UNLIST:
+        event['Type'] = parseInt(newEvent['meta'])
+          ? Interaction.LIST
+          : Interaction.UNLIST
+        event['From'] = newEvent['caller']
+        event['To'] = ''
+        event['Amount'] = newEvent['meta']
+        break
+      case Interaction.SEND:
+        event['From'] = newEvent['caller']
+        event['To'] = newEvent['meta']
+        break
+      case Interaction.CONSUME:
+        event['From'] = newEvent['caller']
+        event['To'] = ''
+        break
+      case Interaction.BUY:
+        event['From'] = newEvent['currentOwner']
+        event['To'] = newEvent['caller']
+        event['Amount'] = newEvent['meta']
+        if (previousPriceMap[nftId]) {
+          event['Percentage'] =
+            ((parseInt(newEvent['meta']) - previousPriceMap[nftId]) /
+              previousPriceMap[nftId]) *
+            100
+        } else {
+          event['Percentage'] = 100
+        }
+        previousPriceMap[nftId] = parseInt(newEvent['meta'])
+        break
+      case InteractionBsxOnly.ROYALTY:
+        event['From'] = newEvent['caller']
+        event['To'] = ''
+        event['Percentage'] = parseInt(newEvent['meta'])
+        break
+      case InteractionBsxOnly.PAY_ROYALTY:
+        event['From'] = newEvent['caller']
+        event['To'] = ''
+        event['Amount'] = newEvent['meta']
+        break
+      default:
+        // unsupported event
+        continue
+    }
 
-  get selectedEvent(): HistoryEventType {
-    return this.event
-  }
+    event['Type'] = event['Type'] ?? newEvent['interaction']
 
-  set selectedEvent(event: HistoryEventType) {
-    if (event) {
-      this.currentPage = 1
-      this.event = event
-      this.replaceUrl(event)
+    // Item
+    if (prop.displayItem) {
+      event['Item'] = newEvent['nft']
     }
-  }
 
-  protected updateDataByEvent() {
-    const event = this.event
-    this.data =
-      event === HistoryEventType.ALL
-        ? this.copyTableData
-        : [...new Set(this.copyTableData.filter((v) => v.Type === event))]
-  }
+    // Amount
+    event['Amount'] = event['Amount'] ?? '-'
 
-  private percentageTextClassName(percentage: number) {
-    if (percentage > 0) {
-      return 'has-text-success'
-    } else if (percentage < 0) {
-      return 'has-text-danger'
-    }
-    return ''
-  }
+    // Date
+    const date = new Date(newEvent['timestamp'])
+    event['Date'] = parseDate(date)
 
-  @Debounce(100)
-  replaceUrl(value: string, key = 'event') {
-    this.$router
-      .replace({
-        path: String(this.$route.path),
-        query: { ...this.$route.query, [key]: value },
-      })
-      .catch(this.$consola.warn /*Navigation Duplicate err fix later */)
-  }
+    // Time
+    event['Time'] = formatDistanceToNow(date, { addSuffix: true })
 
-  protected createTable(): void {
-    this.data = []
-    this.copyTableData = []
+    event['Block'] = String(newEvent['blockNumber'])
 
-    const chartData: ChartData = {
-      buy: [],
-      list: [],
-    }
-    const previousPriceMap = {}
-
-    for (const newEvent of this.events) {
-      const event: any = {}
-
-      const nftId = newEvent['nft'] ? newEvent['nft']['id'] : 'id'
-      // Type
-      switch (newEvent['interaction']) {
-        case Interaction.MINTNFT:
-          event['From'] = newEvent['caller']
-          event['To'] = ''
-          break
-        case Interaction.LIST:
-        case Interaction.UNLIST:
-          event['Type'] = parseInt(newEvent['meta'])
-            ? Interaction.LIST
-            : Interaction.UNLIST
-          event['From'] = newEvent['caller']
-          event['To'] = ''
-          event['Amount'] = newEvent['meta']
-          break
-        case Interaction.SEND:
-          event['From'] = newEvent['caller']
-          event['To'] = newEvent['meta']
-          break
-        case Interaction.CONSUME:
-          event['From'] = newEvent['caller']
-          event['To'] = ''
-          break
-        case Interaction.BUY:
-          event['From'] = newEvent['currentOwner']
-          event['To'] = newEvent['caller']
-          event['Amount'] = newEvent['meta']
-          if (previousPriceMap[nftId]) {
-            event['Percentage'] =
-              ((parseInt(newEvent['meta']) - previousPriceMap[nftId]) /
-                previousPriceMap[nftId]) *
-              100
-          } else {
-            event['Percentage'] = 100
-          }
-          previousPriceMap[nftId] = parseInt(newEvent['meta'])
-          break
-        case InteractionBsxOnly.ROYALTY:
-          event['From'] = newEvent['caller']
-          event['To'] = ''
-          event['Percentage'] = parseInt(newEvent['meta'])
-          break
-        case InteractionBsxOnly.PAY_ROYALTY:
-          event['From'] = newEvent['caller']
-          event['To'] = ''
-          event['Amount'] = newEvent['meta']
-          break
-        default:
-          // unsupported event
-          continue
-      }
-
-      event['Type'] = event['Type'] ?? newEvent['interaction']
-
-      // Item
-      if (this.displayItem) {
-        event['Item'] = newEvent['nft']
-      }
-
-      // Amount
-      event['Amount'] = event['Amount'] ?? '-'
-
-      // Date
-      const date = new Date(newEvent['timestamp'])
-      event['Date'] = parseDate(date)
-
-      // Time
-      event['Time'] = formatDistanceToNow(date, { addSuffix: true })
-
-      event['Block'] = String(newEvent['blockNumber'])
-
-      // ID for table: Use a unique key of your data Object for each row.
-      event['ID'] = newEvent['timestamp'] + newEvent['id']
-
-      // Push to chart data
-      if (newEvent['interaction'] === Interaction.LIST) {
-        this.pushChartData(chartData.list, date, event['Amount'])
-      } else if (newEvent['interaction'] === Interaction.BUY) {
-        this.pushChartData(chartData.buy, date, event['Amount'])
-      }
-
-      this.copyTableData.push(event)
-    }
-    this.copyTableData = this.copyTableData.reverse()
-    this.updateDataByEvent()
+    // ID for table: Use a unique key of your data Object for each row.
+    event['ID'] = newEvent['timestamp'] + newEvent['id']
 
-    if (!this.data.length) {
-      this.event = HistoryEventType.ALL
+    // Push to chart data
+    if (newEvent['interaction'] === Interaction.LIST) {
+      pushChartData(chartData.list, date, event['Amount'])
+    } else if (newEvent['interaction'] === Interaction.BUY) {
+      pushChartData(chartData.buy, date, event['Amount'])
     }
 
-    this.$emit('setPriceChartData', [chartData.buy, chartData.list])
+    copyTableData.value.push(event)
   }
 
-  private pushChartData(array, date, amount) {
-    array.push([date, parseChartAmount(amount, this.decimals)])
-  }
+  copyTableData.value = copyTableData.value.reverse()
+  updateDataByEvent()
 
-  @Watch('events', { immediate: true })
-  public watchEvent(): void {
-    if (this.events) {
-      this.createTable()
-    }
+  if (!data.value.length) {
+    event.value = HistoryEventType.ALL
   }
 
-  @Watch('event', { immediate: true })
-  public watchInteractionEvent(): void {
-    if (this.event) {
-      this.updateDataByEvent()
-    }
-  }
+  emit('setPriceChartData', [chartData.buy, chartData.list])
 }
+
+watch(() => prop.events, createTable)
+
+watch(event, updateDataByEvent)
 </script>
diff --git a/components/rmrk/Gallery/Holder/Holder.vue b/components/rmrk/Gallery/Holder/Holder.vue
index 69bd064a98..776ab35cd0 100644
--- a/components/rmrk/Gallery/Holder/Holder.vue
+++ b/components/rmrk/Gallery/Holder/Holder.vue
@@ -105,7 +105,7 @@
           label="Percentage"
           sortable>
           <span :class="percentageTextClassName(props.row.Percentage)">
-            {{ props.row.Percentage | toPercent('-') }}
+            {{ toPercent(props.row.Percentage, '-') }}
           </span>
         </NeoTableColumn>
         <NeoTableColumn
@@ -145,7 +145,7 @@
               v-if="displayPercentage"
               v-show="columnsVisible['Percentage'].display"
               :class="percentageTextClassName(item.Percentage)">
-              {{ item.Percentage | toPercent('-') }}
+              {{ toPercent(item.Percentage, '-') }}
             </td>
             <td v-show="columnsVisible['Date'].display">
               <NeoTooltip :label="item.Date" position="left">
@@ -159,16 +159,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Watch, mixins } from 'nuxt-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
+<script lang="ts" setup>
 import { Interaction } from '@kodadot1/minimark/v1'
 import { formatDistanceToNow } from 'date-fns'
-
-import ChainMixin from '@/utils/mixins/chainMixin'
-import KeyboardEventsMixin from '@/utils/mixins/keyboardEventsMixin'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-
+import { toPercent } from '@/utils/filters'
 import { parseDate, parsePriceForItem } from './helper'
 import { Interaction as EventInteraction } from '../../service/scheme'
 import { usePreferencesStore } from '@/stores/preferences'
@@ -182,17 +176,8 @@ import {
   NeoTooltip,
 } from '@kodadot1/brick'
 
-const components = {
-  Identity: () => import('@/components/identity/IdentityIndex.vue'),
-  BlockExplorerLink: () => import('@/components/shared/BlockExplorerLink.vue'),
-  NeoField,
-  NeoIcon,
-  NeoTooltip,
-  NeoCheckbox,
-  NeoTable,
-  NeoTableColumn,
-  NeoCollapse,
-}
+import Identity from '@/components/identity/IdentityIndex.vue'
+import BlockExplorerLink from '@/components/shared/BlockExplorerLink.vue'
 
 export type NftHolderEvent = {
   nft: {
@@ -232,320 +217,259 @@ type BaseTableRow = {
   Amount: number
 }
 
-@Component({
-  components,
-})
-export default class CommonHolderTable extends mixins(
-  PrefixMixin,
-  ChainMixin,
-  KeyboardEventsMixin
-) {
-  @Prop({ type: Array }) public events!: NftHolderEvent[]
-  @Prop({ type: Array }) public tableRowsOption!: TableRow[]
-  @Prop({ type: Boolean, default: false }) hideCollapse!: boolean
-  @Prop({ type: String, default: '' }) groupKeyOption!: string
-  @Prop({ type: String, default: 'Name' }) nameHeaderLabel!: string
-  @Prop({ type: String, default: 'Date' }) dateHeaderLabel!: string
-  @Prop({ type: String, default: 'Sale' }) saleHeaderLabel!: string
-  @Prop({ type: String, default: '' }) collapseTitleOption!: string
-  @Prop({ type: String, default: 'Amount' }) defaultSortOption!: string
-  @Prop({ type: Boolean, default: false }) displayPercentage!: boolean
-  @Prop({ type: Boolean, default: false }) isFlipper!: boolean
-
-  private readonly openOnDefault!: boolean
-  private currentPage = parseInt(this.$route.query?.page as string) || 1
-  private customGroups: TableRow[] = []
-  private columnsVisible = {
-    Name: { title: 'Name', display: true },
-    Amount: { title: 'Amount', display: true },
-    Bought: { title: 'Bought', display: true },
-    Sale: { title: 'Sale', display: true },
-    Percentage: { title: 'Percentage', display: true },
-    Date: { title: 'Date', display: true },
-  }
-  public isOpen = false
-  private showDetailIcon = true
-  private preferencesStore = usePreferencesStore()
-
-  public async created() {
-    this.initKeyboardEventHandler({
-      e: this.bindExpandEvents,
-      g: this.bindPaginationEvents,
-    })
-    this.initColumnVisibleConfig()
-  }
-
-  private initColumnVisibleConfig() {
-    this.columnsVisible['Name'].title = this.nameHeaderLabel
-    this.columnsVisible['Date'].title = this.dateHeaderLabel
-    this.columnsVisible['Sale'].title = this.saleHeaderLabel
-  }
-
-  private bindPaginationEvents(event) {
-    switch (event.key) {
-      case 'n':
-        if (this.currentPage < Math.ceil(this.total / this.itemsPerPage)) {
-          this.currentPage = this.currentPage + 1
-        }
-        break
-      case 'p':
-        if (this.currentPage > 1) {
-          this.currentPage = this.currentPage - 1
-        }
-        break
-    }
-  }
-
-  public mounted() {
-    this.isOpen = this.openOnDefault
-  }
-
-  private bindExpandEvents(event) {
-    if (event.key === 'h') {
-      this.isOpen = !this.isOpen
-    }
+const prop = withDefaults(
+  defineProps<{
+    events?: NftHolderEvent[]
+    tableRowsOption?: TableRow[]
+    hideCollapse?: boolean
+    groupKeyOption: string
+    nameHeaderLabel: string
+    dateHeaderLabel: string
+    saleHeaderLabel: string
+    collapseTitleOption: string
+    defaultSortOption: string
+    displayPercentage?: boolean
+    isFlipper?: boolean
+  }>(),
+  {
+    events: () => [],
+    tableRowsOption: () => [],
+    hideCollapse: false,
+    groupKeyOption: '',
+    nameHeaderLabel: 'Name',
+    dateHeaderLabel: 'Date',
+    saleHeaderLabel: 'Sale',
+    collapseTitleOption: '',
+    defaultSortOption: 'Amount',
+    displayPercentage: false,
+    isFlipper: false,
   }
+)
+
+const { $route } = useNuxtApp()
+const preferencesStore = usePreferencesStore()
+const { decimals, unit } = useChain()
+const { urlPrefix } = usePrefix()
+const { replaceUrl } = useReplaceUrl()
+
+const isOpen = ref(false)
+const showDetailIcon = ref(true)
+const currentPage = ref(parseInt($route.query?.page) || 1)
+const customGroups = ref<TableRow[]>([])
+const columnsVisible = ref({
+  Name: { title: 'Name', display: true },
+  Amount: { title: 'Amount', display: true },
+  Bought: { title: 'Bought', display: true },
+  Sale: { title: 'Sale', display: true },
+  Percentage: { title: 'Percentage', display: true },
+  Date: { title: 'Date', display: true },
+})
 
-  get total(): number {
-    return this.customGroups.length
-  }
+const itemsPerPage = computed(() => preferencesStore.getHistoryItemsPerPage)
+const showList = computed(() => customGroups.value)
+const groupKey = computed(() => prop.groupKeyOption || 'Holder')
 
-  get itemsPerPage(): number {
-    return this.preferencesStore.getHistoryItemsPerPage
+const percentageTextClassName = (percentage: number) => {
+  if (percentage > 0) {
+    return 'has-text-success'
+  } else if (percentage < 0) {
+    return 'has-text-danger'
   }
+  return ''
+}
 
-  get showList(): TableRow[] {
-    return this.customGroups
-  }
+const createTable = () => {
+  const NFTList = generateNFTList()
+  customGroups.value = generateCustomGroups(NFTList)
+}
 
-  get groupKey() {
-    return this.groupKeyOption || 'Holder'
-  }
+const createTableByTableRow = () => {
+  customGroups.value = generateCustomGroups(prop.tableRowsOption)
+}
 
-  private percentageTextClassName(percentage: number) {
-    if (percentage >= 100) {
-      return 'has-text-success'
-    } else if (percentage > 0) {
-      return 'has-text-danger'
+const generateNFTList = (): TableRow[] => {
+  const itemRowMap: Record<string, TableRow> = {}
+
+  for (const newEvent of prop.events) {
+    const date = new Date(newEvent['timestamp'])
+    const timestamp = date.getTime()
+    const dateStr = parseDate(date)
+    const formatTime = formatDistanceToNow(date, { addSuffix: true })
+    const block = String(newEvent['blockNumber'])
+    const collectionId = newEvent['nft']['collection']['id']
+    const commonInfo = {
+      Date: dateStr,
+      Time: formatTime,
+      Timestamp: timestamp,
+      Block: block,
+      CollectionId: collectionId,
+      Amount: 1,
     }
-    return ''
-  }
-
-  protected createTable(): void {
-    const NFTList = this.generateNFTList()
-    this.customGroups = this.generateCustomGroups(NFTList)
-  }
-
-  protected createTableByTableRow(): void {
-    this.customGroups = this.generateCustomGroups(this.tableRowsOption)
-  }
-
-  private generateNFTList(): TableRow[] {
-    const itemRowMap: Record<string, TableRow> = {}
-
-    for (const newEvent of this.events) {
-      const date = new Date(newEvent['timestamp'])
-      const timestamp = date.getTime()
-      const dateStr = parseDate(date)
-      const formatTime = formatDistanceToNow(date, { addSuffix: true })
-      const block = String(newEvent['blockNumber'])
-      const collectionId = newEvent['nft']['collection']['id']
-      const commonInfo = {
-        Date: dateStr,
-        Time: formatTime,
-        Timestamp: timestamp,
-        Block: block,
-        CollectionId: collectionId,
-        Amount: 1,
+    const nftId = newEvent['nft'].id
+    if (newEvent['interaction'] === Interaction.MINTNFT) {
+      if (!itemRowMap[nftId]) {
+        itemRowMap[nftId] = {
+          Item: newEvent['nft'],
+          Holder: newEvent['caller'],
+          SortKey: timestamp,
+          Bought: 0,
+          Sale: 0,
+          ...commonInfo,
+        }
       }
-      const nftId = newEvent['nft'].id
-      if (newEvent['interaction'] === Interaction.MINTNFT) {
-        if (!itemRowMap[nftId]) {
-          itemRowMap[nftId] = {
-            Item: newEvent['nft'],
-            Holder: newEvent['caller'],
-            SortKey: timestamp,
-            Bought: 0,
-            Sale: 0,
-            ...commonInfo,
-          }
+    } else if (newEvent['interaction'] === Interaction.LIST) {
+      const listPrice = parseInt(newEvent['meta'])
+      if (itemRowMap[nftId]) {
+        if (!('Sale' in itemRowMap[nftId])) {
+          itemRowMap[nftId]['Sale'] = listPrice
         }
-      } else if (newEvent['interaction'] === Interaction.LIST) {
-        const listPrice = parseInt(newEvent['meta'])
-        if (itemRowMap[nftId]) {
-          if (!('Sale' in itemRowMap[nftId])) {
-            itemRowMap[nftId]['Sale'] = listPrice
-          }
-        } else {
-          itemRowMap[nftId] = {
-            Item: newEvent['nft'],
-            Holder: newEvent['caller'],
-            Sale: listPrice,
-            ...commonInfo,
-          }
+      } else {
+        itemRowMap[nftId] = {
+          Item: newEvent['nft'],
+          Holder: newEvent['caller'],
+          Sale: listPrice,
+          ...commonInfo,
         }
-      } else if (newEvent['interaction'] === Interaction.SEND) {
-        if (itemRowMap[nftId]) {
-          if (!('Bought' in itemRowMap[nftId])) {
-            itemRowMap[nftId]['Bought'] = 0
-            itemRowMap[nftId]['SortKey'] = timestamp
-          }
-        } else {
-          itemRowMap[nftId] = {
-            Item: newEvent['nft'],
-            Holder: newEvent['meta'],
-            SortKey: timestamp,
-            Bought: 0,
-            Sale: 0,
-            ...commonInfo,
-          }
+      }
+    } else if (newEvent['interaction'] === Interaction.SEND) {
+      if (itemRowMap[nftId]) {
+        if (!('Bought' in itemRowMap[nftId])) {
+          itemRowMap[nftId]['Bought'] = 0
+          itemRowMap[nftId]['SortKey'] = timestamp
         }
-      } else if (newEvent['interaction'] === Interaction.CONSUME) {
-        if (!itemRowMap[nftId]) {
-          itemRowMap[nftId] = {
-            Item: newEvent['nft'],
-            Holder: '-',
-            Bought: 0,
-            Sale: 0,
-            ...commonInfo,
-          }
+      } else {
+        itemRowMap[nftId] = {
+          Item: newEvent['nft'],
+          Holder: newEvent['meta'],
+          SortKey: timestamp,
+          Bought: 0,
+          Sale: 0,
+          ...commonInfo,
         }
-      } else if (newEvent['interaction'] === Interaction.BUY) {
-        const bought = parseInt(newEvent['meta'])
-        if (itemRowMap[nftId]) {
-          if (!('Bought' in itemRowMap[nftId])) {
-            itemRowMap[nftId]['Bought'] = bought
-            itemRowMap[nftId]['SortKey'] = timestamp
-          }
-        } else {
-          itemRowMap[nftId] = {
-            Item: newEvent['nft'],
-            Holder: newEvent['caller'],
-            SortKey: timestamp,
-            Bought: bought,
-            Sale: 0,
-            ...commonInfo,
-          }
+      }
+    } else if (newEvent['interaction'] === Interaction.CONSUME) {
+      if (!itemRowMap[nftId]) {
+        itemRowMap[nftId] = {
+          Item: newEvent['nft'],
+          Holder: '-',
+          Bought: 0,
+          Sale: 0,
+          ...commonInfo,
+        }
+      }
+    } else if (newEvent['interaction'] === Interaction.BUY) {
+      const bought = parseInt(newEvent['meta'])
+      if (itemRowMap[nftId]) {
+        if (!('Bought' in itemRowMap[nftId])) {
+          itemRowMap[nftId]['Bought'] = bought
+          itemRowMap[nftId]['SortKey'] = timestamp
+        }
+      } else {
+        itemRowMap[nftId] = {
+          Item: newEvent['nft'],
+          Holder: newEvent['caller'],
+          SortKey: timestamp,
+          Bought: bought,
+          Sale: 0,
+          ...commonInfo,
         }
       }
     }
-    return Object.values(itemRowMap)
   }
+  return Object.values(itemRowMap)
+}
 
-  private getGroupNameFromRow(item: TableRow): string {
-    let groupName
-    switch (this.groupKey) {
-      case 'Holder':
-        groupName = item['Holder']
-        break
-      case 'CollectionId':
-        groupName = item['Item']['collection']['id']
-        break
-      case 'Flipper':
-        groupName = item['Flipper']
-        break
-    }
-    return groupName || item['Holder']
+const getGroupNameFromRow = (item: TableRow): string => {
+  let groupName
+  switch (groupKey.value) {
+    case 'Holder':
+      groupName = item['Holder']
+      break
+    case 'CollectionId':
+      groupName = item['Item']['collection']['id']
+      break
+    case 'Flipper':
+      groupName = item['Flipper']
+      break
   }
+  return groupName || item['Holder']
+}
 
-  private getCustomRowFilter(): (item: TableRow) => boolean {
-    switch (this.groupKey) {
-      case 'Holder':
-        return (item) => item.Holder !== '-'
-      case 'CollectionId':
-        if (this.isFlipper) {
-          return (item) => item.Flipper === this.$route.params.id
-        }
-        return (item) => item.Holder === this.$route.params.id
-      default:
-        return () => true
-    }
+const getCustomRowFilter = (): ((item: TableRow) => boolean) => {
+  switch (groupKey.value) {
+    case 'Holder':
+      return (item) => item.Holder !== '-'
+    case 'CollectionId':
+      if (prop.isFlipper) {
+        return (item) => item.Flipper === $route.params.id
+      }
+      return (item) => item.Holder === $route.params.id
+    default:
+      return () => true
   }
+}
 
-  private getCustomId(item: TableRow): string {
-    let customId
-    switch (this.groupKey) {
-      case 'Flipper':
-        customId = item['Flipper']
-        break
-      case 'Holder':
-      case 'CollectionId':
-        customId = item['CollectionId'] + item['Item']['id']
-    }
-    return customId || item['Timestamp']
+const getCustomId = (item: TableRow): string => {
+  let customId
+  switch (groupKey.value) {
+    case 'Flipper':
+      customId = item['Flipper']
+      break
+    case 'Holder':
+    case 'CollectionId':
+      customId = item['CollectionId'] + item['Item']['id']
   }
+  return customId || item['Timestamp']
+}
 
-  private generateCustomGroups(itemRowList: TableRow[]): TableRow[] {
-    const customGroups: Record<string, TableRow> = {}
-    itemRowList.filter(this.getCustomRowFilter()).forEach((item: TableRow) => {
-      item = {
+const generateCustomGroups = (itemRowList: TableRow[]): TableRow[] => {
+  const customGroups: Record<string, TableRow> = {}
+  itemRowList.filter(getCustomRowFilter()).forEach((item: TableRow) => {
+    item = {
+      ...item,
+      Bought: item.Bought ?? 0,
+      Sale: item.Sale ?? 0,
+    } as TableRow
+
+    const groupName = getGroupNameFromRow(item)
+    if (customGroups[groupName]) {
+      customGroups[groupName].Items?.push(item)
+      customGroups[groupName].Bought =
+        (customGroups[groupName]['Bought'] ?? 0) + (item['Bought'] ?? 0)
+      customGroups[groupName]['Sale'] =
+        (customGroups[groupName]['Sale'] ?? 0) + (item['Sale'] ?? 0)
+    } else {
+      customGroups[groupName] = {
         ...item,
-        Bought: item.Bought ?? 0,
-        Sale: item.Sale ?? 0,
-      } as TableRow
-
-      const groupName = this.getGroupNameFromRow(item)
-      if (customGroups[groupName]) {
-        customGroups[groupName].Items?.push(item)
-        customGroups[groupName].Bought =
-          (customGroups[groupName]['Bought'] ?? 0) + (item['Bought'] ?? 0)
-        customGroups[groupName]['Sale'] =
-          (customGroups[groupName]['Sale'] ?? 0) + (item['Sale'] ?? 0)
-      } else {
-        customGroups[groupName] = {
-          ...item,
-          Id: this.getCustomId(item),
-          Items: [item],
-        }
+        Id: getCustomId(item),
+        Items: [item],
       }
-    })
+    }
+  })
 
-    const customGroupsList = Object.values(customGroups)
+  const customGroupsList = Object.values(customGroups)
 
-    customGroupsList.forEach((group) => {
-      parsePriceForItem(group, this.decimals, this.unit)
-      if (!group['Items']) {
-        return
-      }
-      let groupItems: TableRow[] = group['Items']
-      group['Amount'] = groupItems.length
-      groupItems.forEach((item) => {
-        parsePriceForItem(item, this.decimals, this.unit)
-      })
-      group['Items'] = groupItems.sort(
-        (a, b) => (b.SortKey ?? 0) - (a.SortKey ?? 0)
-      )
-      group['Percentage'] = group['Percentage'] / group['Amount']
+  customGroupsList.forEach((group) => {
+    parsePriceForItem(group, decimals.value, unit.value)
+    if (!group['Items']) {
+      return
+    }
+    let groupItems: TableRow[] = group['Items']
+    group['Amount'] = groupItems.length
+    groupItems.forEach((item) => {
+      parsePriceForItem(item, decimals.value, unit.value)
     })
-    return customGroupsList
-  }
+    group['Items'] = groupItems.sort(
+      (a, b) => (b.SortKey ?? 0) - (a.SortKey ?? 0)
+    )
+    group['Percentage'] = group['Percentage'] / group['Amount']
+  })
+  return customGroupsList
+}
 
-  @Watch('events', { immediate: true })
-  public watchEvent(): void {
-    if (this.events) {
-      this.createTable()
-    }
-  }
-  @Watch('tableRowsOption', { immediate: true })
-  public watchTableRows(): void {
-    if (this.tableRowsOption) {
-      this.createTableByTableRow()
-    }
-  }
+watch(() => prop.events, createTable)
 
-  @Watch('currentPage')
-  watchPageValue(val) {
-    this.replaceUrl(String(val))
-  }
+watch(() => prop.tableRowsOption, createTableByTableRow)
 
-  @Debounce(100)
-  replaceUrl(value: string, key = 'page') {
-    this.$router
-      .replace({
-        path: String(this.$route.path),
-        query: { ...this.$route.query, [key]: value },
-      })
-      .catch(this.$consola.warn /*Navigation Duplicate err fix later */)
-  }
-}
+watch(currentPage, (val) => replaceUrl({ page: String(val) }))
 </script>
diff --git a/components/rmrk/Profile/Sales.vue b/components/rmrk/Profile/Sales.vue
index 02b92385b8..d46e60c4ee 100644
--- a/components/rmrk/Profile/Sales.vue
+++ b/components/rmrk/Profile/Sales.vue
@@ -67,9 +67,7 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Watch, mixins } from 'nuxt-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
+<script lang="ts" setup>
 import { DocumentNode } from 'graphql'
 import { formatDistanceToNow } from 'date-fns'
 import {
@@ -81,25 +79,15 @@ import {
 
 import { exist } from '@/utils/exist'
 
-import ChainMixin from '@/utils/mixins/chainMixin'
-import KeyboardEventsMixin from '@/utils/mixins/keyboardEventsMixin'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-
 import formatBalance from '@/utils/format/balance'
-import shortAddress from '@/utils/shortAddress'
+import { parseDate } from '@/utils/historyEvent'
 
 import { Event } from '../service/types'
 import { usePreferencesStore } from '@/stores/preferences'
 
-const components = {
-  Identity: () => import('@/components/identity/IdentityIndex.vue'),
-  Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
-  BlockExplorerLink: () => import('@/components/shared/BlockExplorerLink.vue'),
-  NeoTable,
-  NeoTableColumn,
-  NeoTooltip,
-  NeoCollapse,
-}
+import Identity from '@/components/identity/IdentityIndex.vue'
+import Pagination from '@/components/rmrk/Gallery/Pagination.vue'
+import BlockExplorerLink from '@/components/shared/BlockExplorerLink.vue'
 
 type TableRowItem = {
   id: string
@@ -128,179 +116,121 @@ type ChartData = {
   list: any[]
 }
 
-@Component({ components })
-export default class Sales extends mixins(
-  PrefixMixin,
-  ChainMixin,
-  KeyboardEventsMixin
-) {
-  @Prop({ type: Array }) public events!: Event[]
-  @Prop({ type: Boolean, default: true })
-  private readonly openOnDefault!: boolean
-  @Prop({ type: Boolean, default: false }) hideCollapse!: boolean
-  @Prop() public query!: DocumentNode
-  @Prop() public issuer!: string
-  protected first = 20
-  private currentPage = parseInt(this.$route.query?.page as string) || 1
-  private event: string = this.$tc('nft.event.BUY')
-  private preferencesStore = usePreferencesStore()
-
-  protected data: TableRow[] = []
-  protected copyTableData: TableRow[] = []
-  public isOpen = false
-  public shortAddress = shortAddress
-
-  public async created() {
-    this.initKeyboardEventHandler({
-      e: this.bindExpandEvents,
-    })
-  }
-
-  public mounted() {
-    exist(this.$route.query.event, (val) => {
-      this.event = val ? decodeURIComponent(val) : 'all'
-    })
-    this.isOpen = this.openOnDefault
-  }
-
-  private bindExpandEvents(event) {
-    if (event.key === 'h') {
-      this.isOpen = !this.isOpen
-    }
-  }
-
-  get total(): number {
-    return this.data.length
-  }
-
-  get itemsPerPage(): number {
-    return this.preferencesStore.getHistoryItemsPerPage
-  }
-
-  get showList(): TableRow[] {
-    const endIndex = this.currentPage * this.itemsPerPage
-    return this.data.slice(endIndex - this.itemsPerPage, endIndex)
-  }
-
-  get uniqType(): string[] {
-    return [...new Map(this.copyTableData.map((v) => [v.Type, v])).keys()]
-  }
-
-  get selectedEvent(): string {
-    return this.event
+const emit = defineEmits(['setPriceChartData'])
+const prop = withDefaults(
+  defineProps<{
+    events?: Event[]
+    openOnDefault?: boolean
+    hideCollapse?: boolean
+    query: DocumentNode
+    issuer: string
+  }>(),
+  {
+    events: () => [],
+    openOnDefault: true,
+    hideCollapse: false,
   }
+)
+
+const { $i18n, $route } = useNuxtApp()
+const preferencesStore = usePreferencesStore()
+const { decimals, unit } = useChain()
+const { urlPrefix } = usePrefix()
+
+const currentPage = ref(parseInt($route.query?.page) || 1)
+const event = ref($i18n.t('nft.event.BUY'))
+const data = ref<TableRow[]>([])
+const copyTableData = ref<TableRow[]>([])
+const isOpen = ref(false)
+
+onMounted(() => {
+  exist($route.query.event, (val) => {
+    event.value = val ? decodeURIComponent(val) : 'all'
+  })
+  isOpen.value = prop.openOnDefault
+})
+
+const total = computed(() => data.value.length)
+const itemsPerPage = computed(() => preferencesStore.getHistoryItemsPerPage)
+const showList = computed(() => {
+  const endIndex = currentPage.value * itemsPerPage.value
+  return data.value.slice(endIndex - itemsPerPage.value, endIndex)
+})
+
+const updateDataByEvent = () => {
+  data.value =
+    event.value === 'all'
+      ? copyTableData.value
+      : [...new Set(copyTableData.value.filter((v) => v.Type === event))]
+}
 
-  set selectedEvent(event: string) {
-    if (event) {
-      this.currentPage = 1
-      this.event = event
-      this.replaceUrl(event)
-    }
-  }
+const createTable = (): void => {
+  data.value = []
+  copyTableData.value = []
+  const priceCollectorMap: Record<string, string> = {}
+  const ownerCollectorMap: Record<string, string> = {}
 
-  protected updateDataByEvent() {
-    const event = this.event
-    this.data =
-      event === 'all'
-        ? this.copyTableData
-        : [...new Set(this.copyTableData.filter((v) => v.Type === event))]
+  const chartData: ChartData = {
+    buy: [],
+    list: [],
   }
 
-  @Debounce(100)
-  replaceUrl(value: string, key = 'event') {
-    this.$router
-      .replace({
-        path: String(this.$route.path),
-        query: { ...this.$route.query, [key]: encodeURIComponent(value) },
-      })
-      .catch(this.$consola.warn /*Navigation Duplicate err fix later */)
-  }
-
-  protected createTable(): void {
-    this.data = []
-    this.copyTableData = []
-    const priceCollectorMap: Record<string, string> = {}
-    const ownerCollectorMap: Record<string, string> = {}
-
-    const chartData: ChartData = {
-      buy: [],
-      list: [],
+  for (const newEvent of prop.events) {
+    const event: any = {}
+    let isListedByUser =
+      newEvent &&
+      newEvent.nft &&
+      newEvent.nft.events &&
+      newEvent.nft.events.find(
+        (e) => e.caller === prop.issuer && e.interaction == 'LIST'
+      )
+
+    if (!isListedByUser) {
+      continue
     }
 
-    for (const newEvent of this.events) {
-      const event: any = {}
-      let isListedByUser =
-        newEvent &&
-        newEvent.nft &&
-        newEvent.nft.events &&
-        newEvent.nft.events.find(
-          (e) => e.caller === this.issuer && e.interaction == 'LIST'
-        )
-
-      if (!isListedByUser) {
-        continue
-      }
+    const nftId = newEvent?.nft?.id
 
-      const nftId = newEvent?.nft?.id
+    event['Buyer'] = newEvent['caller']
+    event['Type'] = $i18n.t('nft.event.BUY')
+    event['Collection'] = newEvent.nft.collection
+    event['Nft'] = newEvent.nft
 
-      event['Buyer'] = newEvent['caller']
-      event['Type'] = this.$t('nft.event.BUY')
-      event['Collection'] = newEvent.nft.collection
-      event['Nft'] = newEvent.nft
+    ownerCollectorMap[nftId] = newEvent['caller']
+    priceCollectorMap[nftId] = newEvent['meta']
 
-      ownerCollectorMap[nftId] = newEvent['caller']
-      priceCollectorMap[nftId] = newEvent['meta']
+    // Amount
+    const curPrice = priceCollectorMap[nftId]
+    event['Amount'] = parseInt(curPrice)
+      ? formatBalance(curPrice, decimals.value, unit.value)
+      : '-'
 
-      // Amount
-      const curPrice = priceCollectorMap[nftId]
-      event['Amount'] = parseInt(curPrice)
-        ? formatBalance(curPrice, this.decimals, this.unit)
-        : '-'
+    // Date
+    const date = new Date(newEvent['timestamp'])
+    event['Date'] = parseDate(date)
 
-      // Date
-      const date = new Date(newEvent['timestamp'])
-      event['Date'] = this.parseDate(date)
+    // Time
+    event['Time'] = formatDistanceToNow(date, { addSuffix: true })
 
-      // Time
-      event['Time'] = formatDistanceToNow(date, { addSuffix: true })
+    event['Block'] = String(newEvent['blockNumber'])
 
-      event['Block'] = String(newEvent['blockNumber'])
-
-      // ID for table: Use a unique key of your data Object for each row.
-      event['ID'] = newEvent['timestamp'] + newEvent['id']
-      // Push to chart data
-      chartData.buy.push([date, parseFloat(event['Amount'].substring(0, 6))])
-      this.copyTableData.push(event)
-    }
-    this.copyTableData = this.copyTableData.reverse()
-    this.updateDataByEvent()
-
-    if (!this.data.length) {
-      this.event = 'all'
-    }
-
-    this.$emit('setPriceChartData', [chartData.buy, chartData.list])
-  }
-
-  protected parseDate(date: Date): string {
-    return date.toLocaleString('en-GB', {
-      timeZone: 'UTC',
-      timeZoneName: 'short',
-    })
+    // ID for table: Use a unique key of your data Object for each row.
+    event['ID'] = newEvent['timestamp'] + newEvent['id']
+    // Push to chart data
+    chartData.buy.push([date, parseFloat(event['Amount'].substring(0, 6))])
+    copyTableData.value.push(event)
   }
+  copyTableData.value = copyTableData.value.reverse()
+  updateDataByEvent()
 
-  @Watch('events', { immediate: true })
-  public watchEvents(): void {
-    if (this.events) {
-      this.createTable()
-    }
+  if (!data.value.length) {
+    event.value = 'all'
   }
 
-  @Watch('event', { immediate: true })
-  public watchInteractionEvent(): void {
-    if (this.event) {
-      this.updateDataByEvent()
-    }
-  }
+  emit('setPriceChartData', [chartData.buy, chartData.list])
 }
+
+watch(() => prop.events, createTable)
+
+watch(event, updateDataByEvent)
 </script>