Vue.jsでv-html内の要素にv-onを設定する方法

ツイッターAPIでフィードを作成するWebアプリを作っているのですが、ツイート内容の表示の際にユーザID(@USRID)のようなものを文字列から、リンクへ変更し、そのリンクをクリックした際にモーダル内の要素を変更するVueメソッドを呼び出し、モーダルを表示するようにしたいと考えているのですが、Vueメソッドの呼び出しがv-onで設定できません。
この場合、どのようにするべきなのでしょうか。

該当のソースコード

js
1replaceEntities: function (text, entities) {
2      if (entities.urls.length !== 0) {
3        for (let url of entities.urls) {
4          text = text.replace(url.url, '<a href="' + url.url + '"' + 'target="_blank">' + url.url + '</a>')
5        }
6      }
7      if (entities.user_mentions.length !== 0) {
8        for (let mention of entities.user_mentions) {
9          text = text.replace('@' + mention.screen_name, '<a class="modal-trigger prof-link-trigger blue-text" href="#user-prof">@' + mention.screen_name + '</a>')
10// text内のユーザIDをaタグで置き換えし、v-htmlで渡している
11// aタグをクリックで、このv-onで設定したメソッドを呼び出すようにしたい
12        }
13      }
14      return text
15    }

html
1<div class="text-with-entities" v-html="replaceEntities(deleteMediaUrls(tweet.full_text, tweet.entities.media), tweet.entities)">
2<!-- ここにtextが入る -->
3</div>

試したこと

JQueryでクリックイベントを追加するようにしてみましたが、動作しませんでした

js
1mounted () {
2    $(document).ready(function () {
3      $('.prof-link-trigger').on('click', function () {
4        this.getUserProf('ID')
5      })
6    })
7  }