javascript - 選択したオプションの Vue update props

Question

私はvue cliを使用しており、測定値のドロップダウンリストを表示するために選択しています。測定を選択したときに小道具を更新するにはどうすればよいですか?

そのユーザーの測定値を表示するグラフを含むモーダルを開くユーザー プロファイル カードがあり、モーダルにいるときに別の測定値を選択して代わりに表示したいと考えています。

ボリュームをクリックすると、グラフのテキストがボリュームに変わり、そのユーザーのボリューム データが表示されます。

イベントリスナー @change を介してチャートのテキストに対してそれを実行しようとしましたが、小道具が渡されず、テキストが変更されていません。

Select: <select name="show" class="show" v-model="value" @change="newText($event)">
                    <option :value="{ text: 'Volume'}">Vol</option>
                    <option :value="{ text: 'Weight'}">Weight</option>
                    <option :value="{ text: 'Temperature'}">Temp</option>
        </select> 

<script>
newText: function(event) {
        const text = this.value.text;
        this.text = text;
        },
<script>

コードサンドボックスの例を次に示します。

どんな助けでも素晴らしいでしょう、ありがとう!