Updating a d3 Chart with Vue on chage to data

Question

This is the first time I'm asking a question here, so I hope I can phrase it in a way that makes sense.

I'm just beginning to learn Vue and D3, and I'm making an app that generates a bar chart based on some user data. It is supposed to display a chart representing one user, and then have a list of buttons that you can click to generate the chart that represents each of the other users. Right now, it can generate a chart for each different set of data, but I can't figure out how to make the chart update when a new user is chosen.

The name in the H2 header at the top of the chart updates when bottons are clicked, so I know my "featuredUser" prop is changing, so the buttons with usernames seem to be working (they are in another component):

<template>
  <div id="Chart">
  <h2>{{ featuredUser.firstName }} {{ featuredUser.lastName }}</h2>
       <div class="Chart"></div>
</div>

</template>

<script>
import * as d3 from 'd3';

export default {
 
props: ["featuredUser"],
name: "Chart",

  watch: {
    featuredUser() { 
      this.generateChart();
      // the below console log works, even when the chart doesn't update
      // so it seems that this varaible is being watched for changes
      console.log(this.featuredUser.firstName);
    }
  },

  methods: {
    generateChart() {
      let qualities = this.featuredUser.qualities;

// EDIT: Adding the following two lines solves the problem
// the remove the previous chart before the new one is generated
   d3.select(".Chart")
        .selectAll('div').remove();

      d3.select(".Chart")
        .selectAll('div')
        .data(qualities)
        .enter().append('div')
        .style('width', function (d) { return (d.score * 5)+10 + "em"})
        .text(function (d) { return d.quality })
        .attr("id", function(d) {return d.type}); 
    },
  },

// having the below as 'setup()' allows the chart to be generated on click
// for one user but it doesn't change when another user is clicked, 
// having it set as 'mounted()' generates the chart of the chosen user on load,
// but it will not change again.

  setup() {
    this.generateChart();
  }
};

</script>