I am trying to get the update time iteratively whenever the dropdown opens but it is returning me null. how to make sure onchange event is triggered correctly.

This is what I have tried so far:

<x-nav-dropdown :text="$notificationIcon" :title="text('nav_notifications')" dropdownClass="notifications-dropdown" align="right"> 
  @forelse(Auth::user()->notifications as $notification)
  <x-dropdown-item :route="$notification->data['link']" :title="text($notification->data['link_title'])" onchange="getTime()" x-data="{timeAgo : 'null', getTime() {this.timeAgo = moment('{{ $notification->created_at->format('c') }}').locale('{{ str_replace('_', '-', cur_lang()->slug) }}').fromNow();} }" >
    <span style="display: inline-block;">{{ text($notification->data['subject']) }}</span>
    <time style="float: right;" x-text= timeAgo> </time>

    </span>
    
    <br/>
    <small>{{ array_key_exists('data', $notification->data) && !empty($notification->data['data']) ? new \Illuminate\Support\HtmlString(vsprintf(text($notification->data['message']), $notification->data['data'])) : text($notification->data['message']) }}</small>
  </x-dropdown-item>
  @empty
  <x-dropdown-item route="#" :title="text('notifications_none')">
    {{ text('notifications_none') }}
  </x-dropdown-item>
  @endforelse
</x-nav-dropdown>

For example desired out should be:

"x"-minuets ago 

Am I doing it right? Can I call the onchange event into bootstrap tags? Any kind of help in right direction?

Thanks in advance!