I am desperately trying to make vue-echart work within a v-card component of vuetify.

Somehow, I am not able to adjust the size of the canvas the chart is drawn on to fit within the v-card. It somehow exceeds the card. I have been searching for days now and did not come up with a proper solution. Is there any way to make this work? The weird thing is that as soon as I put the chart element into a div or container, I get an error complaining about Can't get DOM width or height.

Here is a simplified version of my code:

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col class="col-3">
            <v-card class="mx-auto" height="500" outlined elevation="2">
              <v-card-title class="text-h5 font-weight-bold"
                >Registrations</v-card-title
              >
              <v-card-subtitle
                >Number of participants registered per
                profession</v-card-subtitle
              >
              <!-- <v-container> -->
              <chart :option="chartOptions" class="ma-10"></chart>
              <!-- </v-container> -->
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  components: {},

  data() {
    return {
      chartOptions: null,
      number_of_professors: 30,
      number_of_doctors: 50,
      number_of_other: 20,
    };
  },

  mounted() {
    this.chartOptions = {
      color: ["#EF5350", "#29B6F6", "#FFCA28"],
      width: "100%",
      height: "100%",
      legend: {
        orient: "vertical",
        y: "top",
        x: "left",
        data: ["professor", "doctor", "other"],
      },
      series: [
        {
          type: "pie",
          data: [
            { name: "professor", value: this.number_of_professors },
            { name: "doctor", value: this.number_of_doctors },
            { name: "other", value: this.number_of_other },
          ],
          radius: ["30%", "80%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
        },
      ],
    };
  },
};
</script>

Thanks for your help.