Vue.jsのコンポーネントでslotを使用して再利用可能なモーダルを作成したい

CDN版のVue.jsのコンポーネントを使用し、モーダルを作成しています。

画像をクリックするとモーダルが表示されるように実装したく、
その画像同じセクションに何枚もあるので、
画像ごとにその画像に合わせたコンテンツを表示したいと思っています。

モーダルの共通部分の中身をコンポーネント化し、名前付きスロットでHTML側からコンテンツに合わせた内容を挿入し、モーダルに表示させたいのですが、ただ名前付きスロットを使用するだけだと、どの画像をクリックしても同じコンテンツが表示されてしまいます(順番が後のv-slotが反映される)。

この場合の対処法などはありますか？ご教授いただけると幸いです、よろしくお願いいたします。

下記のコードの場合、
img1をクリックしたら、画像1のコンテンツですを表示し、
img2をクリックしたら、画像2のコンテンツですを表示させたいです。

(また、img1, img2どちらをクリックしてもどちらのコンテンツも表示されているのですが、いずれもクリックしたときはimg2のコンテンツが表示されます...。)

HTML
1<div id="app">
2  <div class="works-container">
3
4    <img src="image/img1.jpg" alt="画像1" v-on:click="openModal">
5    <open-modal v-show="showModal" @from-child="closeModal">
6      <template v-slot:img1>
7        <h3>画像1のコンテンツです</h3>     
8      </template>
9    </open-modal>
10
11    <img src="image/img2.jpg" alt="画像2" v-on:click="openModal">
12    <open-modal v-show="showModal" @from-child="closeModal">
13      <template v-slot:img2>
14        <h3>画像2のコンテンツです</h3>     
15      </template>
16    </open-modal>
17
18  </div>
19</div>

JS
1Vue.component('open-modal', {
2  template: `
3    <div id="overlay" v-show="showModal" @click="exitModal">
4      <div id="works-content" @click="stopModal" @click="keepModal">
5
6      <slot name="img1"></slot>
7      <slot name="img2"></slot>
8
9      <button type="button" @click="exitModal">CLOSE</button>
10      </div>
11    </div>
12  `,
13  methods: {
14    exitModal: function () {
15      this.$emit('from-child')
16    },
17    keepModal: function () {
18      event.stopPropagation()
19    }
20  },
21});
22
23new Vue({
24  el: '#app',
25  data: {
26    showModal: false
27  },
28  methods: {
29    openModal: function () {
30      this.showModal = true
31    },
32    closeModal: function () {
33      this.showModal = false
34    }
35  }
36})