I have a page with a lot of inputs where the user can change the details of an event and after that the user can click on the save button which would trigger the saveChanges() method which would re-render the page with the new inputs. This would be only a mock implementation for now as the backend is not ready so if there would be a full page reload the changes would disappear. I store the changes in my store.state and would like to see if there is a store.state.newEvent in my preloader if there is then the params.event should be the store.state.newEvent if not then the original event object.

data() {
  return {
    event: this.$route.params.event,
    newEvent: { ...this.$route.params.event},
    ...
  };
},

saveChanges() {
  store.setNewEvent(this.newEvent);
  this.$router
    .push({
      name: RouteNames.EventManagement.name,
      params: {
        ID: this.event.id,
      },
    });
},

my router

const routes = [
  {
    name: RouteNames.EventManagement.name,
    path: RouteNames.EventManagement.path,
    beforeEnter: async to => {
      await managementPreload.preload(to);
    },
    component: EventManagement,
  },
]

my preloader

  async preload(to) {
    store.showSpinner();

    console.log(store.state.newEvent);

    if (store.state.newEvent) {
      to.params.event= store.state.newEvent;
    } else {
      let data = await EventManagementManager.getById({
        id: to.params.ID,
      });
      to.params.event= data.event;
    }

    store.hideSpinner();

    return to;
  }

When I try to call the saveChanges() the console.log does not even get triggered so I guess the program does not get to the preloader at all.