Vue update props on select options

I have a select to display a dropdown list of measurements. I’m wondering how I can update props when I select a measurement?

I have a user profile card that opens a modal with a chart displaying measurement for that user and when I’m in the modal I would like to select another measurement and display that instead.

So when I click on volume, the chart text changes to volume and displays volume data for that user.

I tried to do it via computed property but it seems to not let me select user or change when I click on measurement. Here is a codesandbox example.

      style="background: white; border-radius: 10px; width: 10vw; color: rgb(19,89,103);"
<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>
  <Chart :name="selectedUser" :dat="dat" :text="text"></Chart>
methods: {
 newText: function(event) {
      const text = this.value.text;
      this.text = text;

computed: {
    selectedUser() {
      if ( {
        let name =;
        return this.users.find(e => == name);
      } else return {};

Any help would be great, thanks so much!