Vue with google map API - 動的に生成されるMarkerにv-on関数を紐づける実装

Question

毎度お世話になります。
google map APIを題材に、JS及びVueの勉強をしております。
自分で考えてもどうしても実現できない機能がありますので、お力をお貸しいただけますと幸いです。

実現したいこと：Ajaxで定期的にDBから新規ユーザー情報を取得し、新規ユーザーが追加されたら、Google Mapにそのユーザーの場所をMarkerで表示し、ユーザー名、写真及び「プロフィール」ボタンを付与する。
「プロフィール」ボタンをクリックすると、ユーザーのプロフィールがalertで表示される。

利用している環境：Laravel6 Vue2 Google maps javascript API

現状のコード

<template>
    <div>
        <div class="map" ref="googleMap" />
    </div>
</template>

<script>
import { Loader } from '@googlemaps/js-api-loader';

export default {
    mounted() {
        const loader = new Loader({
            apiKey: "MY API KEY",
        });
        loader.load().then(() => {
            // googlemap生成処理
        });
        setInterval(this.download, 1000);
    },

    methods:{

        download:function(){
            axios.get('/home/ajax/download').then((res)=>{
                this.users = res.data;
                this.users.forEach(function( user ) {
                        this.markers[user.id] = new google.maps.Marker({
                            position: {lat: user.latitude, lng: user.longitude},
                            map: this.map,
                            title: user.name,
                        });
                        this.markers[user.id].addListener("click", () => {
                            var content = '<div>' +user.name+ '</div>'
                            content += '<img src="' + user.imgpath + '">'
                            content += '<button v-on:click="btn_profile(user.msg)">プロフィール</button>'

                            new google.maps.InfoWindow({
                                content
                            }).open(this.markers[user.id].getMap(), this.markers[user.id]);
                        });
                },this);
            }).catch(error => console.log(error))
        },
        btn_profile:function(msg){
            alert(msg);
        }
　　}
}
</script>

参考にした情報：過去の同種質問

現状のコードでうまくいかない理由は、上記参考情報を読むことで判明しております。（downloadメソッドに記述したv-on:clickのコンパイルが走らないため）
しかし、上記参考情報に倣ってあらかじめtemplateにv-forで箱を準備しようとしても、contentの内容(user.msg)自体がaxiosで不定期に飛んでくるため、どのような実装にしたらよいのか、イメージがわかずにいます。

どなたかお知恵を拝借できませんでしょうか。

どうぞ宜しくお願い致します。

Answer 1

マーカーの内部HTML（content）内のボタンに紐付けたv-onディレクティブを利かせる方法はわかりませんでした。
その意味ではタイトルに対する直接の答えにはなっていませんが、
「実現したいこと」のうち「『プロフィール』ボタンをクリックすると、ユーザーのプロフィールがalertで表示される。」の部分について、下記のような形ではどうでしょうか。

・markerのinfowindowのcontent(HTML)設定時、あらかじめマーカーと紐づいたボタンID（ここではユーザーIDと同一にしています）をHTMLに書き込んでおきます。
・マーカークリック時に、infowindowのdomreadyイベントが発火するので、そのタイミングで実体化したinfowindow内のボタン要素を、用意しておいたボタンIDで特定し、clickイベントを紐づけます。

  data() {
    return {
     （略）
      /* clickイベントの二重登録を防ぐための配列。
         イベントセット済みのボタンのIDを格納する。*/
      eventSetIds: [],
     （略）
    }
  },
  methods: {
　 （略）
    download: function() {
      const self = this;
      axios.get('/home/ajax/download')
        .then(res => {
          this.users = res.data;
          this.users.forEach(function(user) {
            this.markers[user.id] = new google.maps.Marker({
              position: { lat: user.latitude, lng: user.longitude },
              map: this.map,
              title: user.name
            });
            const content =
              `<div>${user.name} </div><img src="${user.imgpath}">` +
              `<button id="${user.id}">プロフィール</button>`;
            const infowindow = new google.maps.InfoWindow({
              content
            });
            this.markers[user.id].addListener("click", () => {
              infowindow.open(
                this.markers[user.id].getMap(),
                this.markers[user.id]
              );
            });
            // infowindow構築時にボタンに対するclickイベントを付加する
            google.maps.event.addListener(infowindow, "domready", function() {
              const btnid = user.id;
              // clickイベントの二重登録を防ぐためのチェック
              if (!self.eventSetIds.includes(btnid)) {
                self.eventSetIds.push(btnid);
                // content内に記述したボタンにclickイベントを登録する
                document.getElementById(btnid)
                  .addEventListener("click", function(e) {
                    self.btn_profile(user);
                  });
              }
            });
          }, this);
        })
        .catch(error => console.log(error));
    },
    btn_profile(user) {
      console.log(`Called btn_profile(user.id="${user.id}")`);
      alert(user.msg);
    }
  },