I want my component to accept different formula for computation of last column and use that formula to vuex getters to store the total of state that I passed in my component.

Component I want to make: -Can have dynamic columns ✓ -Can accept dynamic formula X -Specify what column to add in formula X

Below is the code of my component

<template>
  <div>
    <h2 class="text-center">{{ title }}</h2>
    <v-row>
      <v-col v-for="(header, i) in headers" :key="i">
        <div class="text-center">{{ header.text }}</div>
      </v-col>
    </v-row>
    <v-row class="align-center" v-for="(item, i) in stateArr" :key="i">
      <v-col v-for="(header, j) in headers" :key="j">
        <div v-if="header.type == 'number'" class="text-center">
          {{ i + 1 }}
        </div>
        <div v-if="header.type == 'input'">
          <v-text-field
            outlined
            dense
            hide-details="auto"
            :value="item[header.value]"
            @input="commit(i, header.value, $event)"
          >
          </v-text-field>
        </div>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <h2 class="text-center">Total</h2>
      </v-col>
      <v-spacer></v-spacer>
      <v-col>
        <h2 class="text-center">0</h2>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    stateName: {
      default: "",
    },
    headers: {
      default: () => [],
    },
    title: {
      default: "",
    },
    rows: {
      default: 5,
    },
  },
  mounted() {
    for (let i = 0; i < this.rows; i++) {
      this.addRow(this.stateName);
    }
  },
  computed: {
    ...mapState({
      stateArr(state) {
        return state[this.stateName];
      },
    }),
  },
  methods: {
    ...mapMutations(["mutateArr", "addRow", "reduceRow"]),
    commit(index, property, val) {
      this.mutateArr({
        name: this.stateName,
        index: index,
        property: property,
        val: val,
      });
    },
  },
};
</script>