Vue update props on select options

1

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.

 <v-select
      :value="selectedUser.name"
      @input="setSelected"
      class="style-chooser"
      placeholder="Name"
      style="background: white; border-radius: 10px; width: 10vw; color: rgb(19,89,103);"
      label="name"
      :options="users"
   ></v-select>
  </span>
  </span>
      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>
  <Chart :name="selectedUser" :dat="dat" :text="text"></Chart>
<script>
methods: {
 newText: function(event) {
      const text = this.value.text;
      this.text = text;
    }
  },
}

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

Any help would be great, thanks so much!