vueで、表示している複数グラフの中の１つをクリックしたらポップアップさせる方法

実現したいこと

1. ＤＢに、果物マスタと売り上げデータがあるとする。
2. 画面の上部に、日付（範囲指定可能）と、果物の名前を選択する入力エリアがある。果物名は、予めマスタに登録済みで、複数選択可能。
3. 果物マスタには上限10種類まで登録済みで、それ以上はないとする。
4. 売り上げデータから指定した日付の選択された果物を条件にしてデータを取得する。
5. 果物ごとに売り上げデータをグラフ化する。
6. 8種類の果物が選ばれたら、８つのグラフを1画面に表示するイメージ。

以上までは、自力でどうにか実現できております。
ここからさらに、例えば4番目のグラフをクリックしたら、そのグラフだけを画面の中心に
大きめにポップアップ表示させたいです。

発生している問題・分からないこと

画面中のグラフのうち、どれか１つをクリックしたときに、
ポップアップ表示用の関数(showPopup　さらに　displayPopup)
が呼ばれるところまでは確認できましたが、グラフの中身がうまく渡っていないようで、
クリックしても画面上では無反応となります。

該当のソースコード

template

1※グラフの定義部分の抜き出し 2<v-row v-bind="rowStyle"> 3 <!-- 最大表示グラフ数は、10までとする --> 4 <v-col v-for="index in 10" :key="index" cols="12" md="6" lg="4" xl="3" > 5 <!-- グラフコンポーネントの表示 --> 6 <v-card class="chart-card" @click="showPopup(index - 1)"> 7 <v-card-text class ="v-card-text"> 8 <div :id="generateChartContainerId(index - 1)" class="chart-container"></div> 9 </v-card-text> 10 </v-card> 11 </v-col> 12 <!-- ポップアップ --> 13 <div v-if="popupVisible" class="popup" @click="closePopup"> 14 <div class="popup-content"> 15 <div class="popup-chart-container" ref="popupChart" id="popup-chart-container"></div> 16 </div> 17 </div> 18</v-row>

script

1※関連する部分だけを抜き出し 2 3let popupVisible = false; // ポップアップ表示フラグ 4let popupIndex = null; // 選択されたグラフのインデックス 5 6// グローバルスコープでグラフのデータを管理する変数 7let graphData = []; 8 9// グラフクリック時の処理 10async function showPopup(index) { 11 console.log(`Clicked on graph ${index + 1}`,graphData[index]); 12 popupVisible = true; 13 popupIndex = index; 14 15 // グラフデータからクリックされたグラフに関連するデータを検索 16 const popupGraphData = graphData[index]; 17 18 // ポップアップを表示する関数にデータを渡して呼び出す 19 displayPopup(popupGraphData); 20}; 21 22 23// ポップアップを表示する関数 24async function displayPopup(popupGraphData) { 25 const matchingData = popupGraphData;//売り上げデータ 26 const f_name = matchingData.f_name;//果物名 27 28 // ポップアップ用の要素を取得 29 const popupChartContainer = ref(popupChart);　←エラーになるところ 30 console.log("----popupChartContainer----", popupChartContainer); 31 32 // ポップアップ用のEChartsインスタンスを作成し、グラフを描画 33 if (popupChartContainer) { 34 // すでに初期化されたインスタンスがあれば破棄 35 if (popupChartContainer.chart) { 36 popupChartContainer.chart.dispose(); 37 } 38 //グラフ描画処理の呼び出し 39 drawChart2(f_name, popupChartContainer, matchingData); 40 41 } 42 43 // ポップアップを表示 44 if (popupChartContainer) { 45 popupChartContainer.style.display = 'block'; 46 } 47}; 48 49 50// ポップアップを閉じる 51async function closePopup() { 52 popupChartContainer.style.display = 'none'; // ポップアップを非表示 53 // popupVisible = false; 54 // popupIndex = null; 55}

試したこと・調べたこと

上記の詳細・結果

// ポップアップ用の要素を取得
const popupChartContainer = ref(popupChart);
この部分が原因の１つになっていると思います。
実際に、
「Uncaught (in promise) ReferenceError: popupChart is not defined」というエラーになります。
この不具合をどのように回避したらよいのかわかりません。

そもそも実現したいことへの私のアプローチが正しいのかもわからないため、
ご指摘いただけますとありがたいです。

補足

WEB開発も日が浅いので、試行錯誤の日々です。
Windows 10 Pro 22H2
vue 3.4.20
vuetify 3.5.6
ブラウザ chrome