vue googlemap api 吹き出しの中でモーダル出して動的に値を変えたい

前提・実現したいこと

吹き出しの中のボタンを押してモーダルをだして、その内容を吹き出しと同じように動的に値を変えたいです。

vuejsでgooglemapのJavaScript APIを使っています。
mapのライブラリなどは使っていません。

複数マーカー、吹き出し、ボタンクリックでモーダルは出ました。
吹き出しの値は動的に変わるのですが、モーダルの内容をどのようにして変えればいいのかわかりません。

該当のソースコード

該当箇所を載せておきます。

vue
1<template>
2  <div>
3    <div :id="mapName" class="googleMap" :marker="marker"></div>
4    <div id="overlay" v-show="showContent" v-on:click="closeModal">
5      <div id="content">
6        <button v-on:click="closeModal" id="close"><img :src="closebutton"></button>
7        <p id="detailTitle">${this.marker_items[i].name}</p>
8      </div>
9    </div>
10  </div>
11</template>
12
13<script>
14  export default{
15    data(){
16      return{
17        mapName:'map',
18        element: null,
19        map: null,
20        marker: null,
21        latlng: null,
22        center: {lat:0, lng:0},
23        position: null,
24        mapOptions: null,
25        marker_items:[
26          {name: 'あああ', position: {lat: 34.909279, lng: 139.660684}, icon: open},
27          {name: 'あああ', position: {lat: 36.909279, lng: 139.660684}, icon: open},
28          {name: 'あああ', position: {lat: 34.909279, lng: 139.660684}, icon: open},
29        ],
30        infowindow: null,
31        showContent: false,
32        closebutton: require("~/assets/img/✖.png"),
33        titleName: null,
34      }
35    },
36
37    created: function(){
38          if (process.client) {
39            if (!navigator.geolocation) {
40              alert('現在地情報を取得できませんでした。お使いのブラウザでは現在地情報を利用できない可能性があります。エリアを入力してください。')
41              return
42            }
43
44            const options = {
45              enableHighAccuracy: false,
46              timeout: 5000,
47              maximumAge: 0
48            }
49
50            navigator.geolocation.getCurrentPosition(this.success, this.error, options)
51            this.icon1 = {
52              url: '~/assets/img/Position_balloon.png',
53            }
54            this.icon2 = {
55              url: '~/assets/img/Position_balloon_✖.png',
56            }
57          }
58    },
59    mounted: function () {
60      const modal = document.querySelector('#overlay')
61      disableBodyScroll(modal)
62    },
63    beforeDestroy(){
64      clearAllBodyScrollLocks()
65    },
66
67    methods:{
68      success (position) {
69       this.center.lat = position.coords.latitude
70       this.center.lng = position.coords.longitude
71
72       this.element = document.getElementById(this.mapName)
73       this.mapOptions = {
74         zoom: 17,
75         center: {lat:this.center.lat, lng:this.center.lng},
76         gestureHandling: 'greedy',
77         scaleControl: false,
78         mapTypeControl: false,
79         zoomControl: false,
80         streetViewControl: false,
81         fullscreenControl: false,
82       }
83       this.map = new google.maps.Map(this.element, this.mapOptions)
84       for (var i = 0; i < this.marker_items.length; i++){
85          let marker = new google.maps.Marker({
86            position: this.marker_items[i].position,
87            map: this.map,
88            icon: this.marker_items[i].icon
89          });
90
91          this.checkWifi(i);
92
93          var contentString = `<div id="info">
94                                 <p>
95                                   ${this.marker_items[i].name}
96                                 </p>
97                                 <button id="jumpDetails">詳細</button>
98                               </div>`;
99
100          let infowindow = new google.maps.InfoWindow({
101           content: contentString
102          });
103
104          marker.addListener("click", function() {
105             infowindow.open(this.map, marker);
106          });
107          infowindow.addListener('domready', () => {
108             document.getElementById('jumpDetails').addEventListener('click', () => {
109                this.openModal();
110             });
111           });
112       };
113     },
114
115      error (error) {
116       this.element = document.getElementById(this.mapName)
117       this.map = new google.maps.Map(this.element, this.mapOptions)
118       this.mapOptions = {
119         zoom: 17,
120         center: {lat:35.690218, lng:139.700592},
121         gestureHandling: 'greedy',
122         scaleControl: false,
123         mapTypeControl: false,
124         zoomControl: false,
125         streetViewControl: false,
126         fullscreenControl: false,
127       }
128       switch (error.code) {
129         case 1:
130           alert('位置情報の利用が許可されていません')
131           break
132         case 2:
133           alert('現在位置が取得できませんでした')
134           break
135         case 3:
136           alert('タイムアウトになりました')
137           break
138         default:
139           alert('現在位置が取得できませんでした')
140           break
141       }
142      },
143
144      openModal: function(){
145        this.showContent = true
146      },
147      closeModal: function(){
148        this.showContent = false
149      },
150    },
151  }
152</script>
153<style>
154  .googleMap {
155    height: 500pt;
156    width: 100%;
157    z-index: 2 !important;
158  }
159  
160  #info{
161    text-align: center;
162
163  }
164  #infoIcon{
165    display: flex;
166  }
167  /* mordal */
168  #overlay{
169    /*　要素を重ねた時の順番　*/
170    z-index:110;
171
172    /*　画面全体を覆う設定　*/
173    position:fixed;
174    top:0;
175    left:0;
176    width:100%;
177    height:100%;
178    /* background-color:rgba(0,0,0,0.5); */
179
180    /*　画面の中央に要素を表示させる設定　*/
181    display: flex;
182    align-items: center;
183    justify-content: center;
184    overflow-y: auto;
185    max-height: 100%;
186  }
187  #content{
188    z-index:200;
189    width:90%;
190    /* padding: 1em; */
191    background-color: rgb(231, 222, 202);
192    max-height: 90%;
193    border: rgb(80, 35, 0) solid 4pt;
194    overflow: scroll;
195    text-align: center;
196    position: relative;
197  }
198  #close{
199    position: absolute;
200    top: -10pt;
201    right: -20pt;
202    overflow: visible;
203  }
204  #close img{
205    z-index: 300;
206  }
207  #detailTitle{
208    font-size: 15pt;
209    line-height: 22pt;
210    color: rgb(80, 35, 0);
211  }
212  table{
213    width: 100%;
214    border: #B4A291 solid;
215    border-width:2px 0 2pt 0;
216    color: rgb(80, 35, 0);
217  }
218  tr,th,td{
219    border: #B4A291 solid 1pt;
220    color: rgb(80, 35, 0);
221  }
222</style>
223