Vuex clear data from heap

• Issue - When i click on one of the listed projects it's routing to project and showing structuresTree data of 168mb, then data become to be 2GB
• When i'm going back to projects my heap stay 2GB, I'm working with large data so when i'm going back to projects i need to clear the JavaScript VM Instance.

what have i tried to clear the JavaScript VM Instance:

beforeDestroy() {
    this .$store.commit("structures/setStrItemTree", []);
    this.$store._vm.$destroy();
}

and it didn't work and JavaScript VM Instance showing: 2GB

My code:

This my state:

    state: {
        structuresTree: [],
    },
    mutations: {
        setStrItemTree: (state, structuresTree) => (state.structuresTree = structuresTree),
    },

I have 2 routes (Porjects - show all the projects list, Project - show project details and structure) Inside project i have:

  computed: {
    ...mapGetters("structures", ["allStructuresTree"]),
  },
created() {
      // simple actions that return axios.get API call ....
    this.$store
        .dispatch("structures/getStructureItemTree", 1223)
        .then(({ data, status }: { data: any; status: number }) => {
          debugger
          this.$store.commit("structures/setStrItemTree", data);

          // for some reason data become to be 2GB, If you know why i will appreciate your answer
        });
  },
beforeDestroy() {
    this .$store.commit("structures/setStrItemTree", []);
    this.$store._vm.$destroy();
}

Screenshots:

Projects

Project

Back to Project

VM Heap is still 2gb

When going to project again