Vuetify v-data-table のフッターに合計行を追加する

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" id="table">
          <template slot="body.append">
            <tr><!-- 合計行を表示するため --></tr>
          </template>
        </v-data-table>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  data() {
    return {
      headers: [
        { text: "Dessert (100g serving)", value: "name" },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" },
        { text: "Carbs (g)", value: "carbs" },
        { text: "Protein (g)", value: "protein" },
        { text: "Iron (%)", value: "iron" }
      ],
      desserts: [
        { name: "Frozen Yogurt", calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: "1%" },
        { name: "Ice cream sandwich", calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: "1%" },
        { name: "Eclair", calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: "7%" },
        { name: "Cupcake", calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: "8%" },
        { name: "Gingerbread", calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: "16%" },
        { name: "Jelly bean", calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: "0%" },
        { name: "Lollipop", calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: "2%" },
        { name: "Honeycomb", calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: "45%" },
        { name: "Donut", calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: "22%" },
        { name: "KitKat", calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: "6%" }
      ]
    };
  },
  mounted() {
    let sumCalories = 0;
    let sumFat = 0;
    let sumCarbs = 0;
    let sumProtein = 0;

    this.desserts.forEach((element) => {
      sumCalories = sumCalories + element.calories;
      sumFat = sumFat + element.fat;
      sumCarbs = sumCarbs + element.carbs;
      sumProtein = sumProtein + element.protein;
    });

    const tbody = document.querySelector("#table > div > table > tbody");
    const newRow = tbody.insertRow();

    const totalNameCell = newRow.insertCell();
    totalNameCell.classList.add("text-start");
    totalNameCell.appendChild(document.createTextNode("合計"));

    const totalCaloriesCell = newRow.insertCell();
    totalCaloriesCell.classList.add("text-start");
    totalCaloriesCell.appendChild(document.createTextNode(sumCalories));

    const totalFatCell = newRow.insertCell();
    totalFatCell.classList.add("text-start");
    totalFatCell.appendChild(document.createTextNode(Math.floor(sumFat)));

    const totalCarbsCell = newRow.insertCell();
    totalCarbsCell.classList.add("text-start");
    totalCarbsCell.appendChild(document.createTextNode(sumCarbs));

    const totalProteinCell = newRow.insertCell();
    totalProteinCell.classList.add("text-start");
    totalProteinCell.appendChild(document.createTextNode(sumProtein));

    const totalIronCell = newRow.insertCell();
    totalIronCell.classList.add("text-start");
    totalIronCell.appendChild(document.createTextNode(""));
  },
};
</script>