Vuex - transform store item twice, commit new items, or do transformations in components every mount?

I would like to do two separate transformations of a single, large store item and commit the results back to the store as two new, additional store items. i.e.

setEventsData: (state, data) => {...} // main huge master object
// do transformations on it then 
setGridData: (state, transformedEventsData) => {}
setCalendarData: (state, differentTransformedEventsData) => {}

My thinking was that I should do the transformations in App.js and commit those to new store items as above because I think it might be better to get all done at page load and have the transformed data read at mapState versus doing the transformation every mount in the Grid and Calendar components. Is this good reasoning?

I am doing something wrong because the original store item state.eventsData keeps getting mangled somewhere along the way during my transformations on local copies. (see the methods transformCalendarData() and transformGridData() below. I don't know why this.eventsData is getting altered, or if this is the best way to do this.

setEventsData mutation and load action

    mutations: {
      setEventsData: (state, data) => {
        state.eventsData = data;
        localStorage.setItem("eventsData", JSON.stringify(data));
      },
    }
    loadData({ commit }) {
      axios
        .get("/data/eventsData.json")
        .then((response) => {
          commit("setEventsData", response.data);
          commit("setLoading", false);
        })
        .catch((error) => {
          console.log(error);
        });
    },

App.js

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import state from "./store/index";
import { mapState } from "vuex";

export default {
  name: "App",
  data() {
    return {
      calendarData: [],
      gridData: [],
    };
  },
  computed: mapState(["loading", "eventsData"]),
  beforeCreate() {
    state.commit("initializeStore");
  },
  created: function () {
    this.$store.dispatch("loadData");
    this.gridData = this.eventsData;
    this.calendarData = this.eventsData;
  },
  mounted() {
    this.transformDataForGrid();
    this.transformDataForCalendar();
  },
  methods: {
    transformDataForCalendar() {
      this.calendarData.forEach((event, i) => {
        delete event.artist_supporting;
        delete event.genre;
        delete event.venue;
        delete event.venue_city;
        delete event.venue_state;
        delete event.capacity;
        delete event.announce_date;
        delete event.onsale_date;
        delete event.promoter;
        delete event.business_unit;
        delete event.show_type;
        delete event.confirm_date;
        delete event.cancelled_date;
        delete event.status;

        event.venue_id = `event_${i}`;
        event.id = event.venue_id;
        event.title = event.artist_headliner;
        event.startDate = event.event_date;

        delete event.venue_id;
        delete event.artist_headliner;
        delete event.event_date;

        let date = new Date(event.startDate);
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        if (day < 10) {
          day = "0" + day;
        }
        if (month < 10) {
          month = "0" + month;
        }
        event.startDate = year + "-" + month + "-" + day;
      });
      state.commit("setCalendarData", this.calendarData);
    },
    transformDataForGrid() {
      this.gridData.forEach((event) => {
        let date = new Date(event.event_date);
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        if (day < 10) {
          day = "0" + day;
        }
        if (month < 10) {
          month = "0" + month;
        }
        event.event_date = year + "-" + month + "-" + day;
      });
      state.commit("setGridData", this.gridData);
    },
  },
};
</script>