Updated chart based on user

#1

I have chart I have chart that displays weight, volume and temperature for each user, I am able to switch between what is being displayed on the chart but I’m wondering if there is a way to change the data being displayed based on the user? I have a codesandbox when I double click on a measurement the graph shows.

In parent component I can update the user:

<v-select
   v-model="selected"
   @input="setUser"
   class="style-chooser"
    :placeholder="this.name"
    style="background: white; border-radius: 10px; width: 10vw; color: rgb(19,89,103);"
   label="name"
  :options="users"
 ></v-select>

<script>
setUser(info) {
      this.user = info.name;
      console.log(this.user);
    },

Then in the child graph compoenent:

<select @change="handleChange">
        <option>Volume</option>
        <option>Temp</option>
        <option>Weight</option>
</select>

<script>
handleChange(event) {
      console.log(this.user);
      if (event.target.value === "Volume") {
        this.chartOptions.series[0].data = this.users.find(
          x => x.name === this.name
        ).Volume;
      } else if (event.target.value === "Temp") {
        this.chartOptions.series[0].data = this.users.find(
          x => x.name === this.name
        ).Temp;
      } else {
        this.chartOptions.series[0].data = this.users.find(
          x => x.name === this.name
        ).Weight;
      }
    },

For ex. if I click on weight for Amy I see the weight graph and I can change to view the temp and volume graph but I’m wondering how I can click on Joe and view his graph?

Thanks so much!

#2