Data updated but view not render (Error: [vuex] do not mutate vuex store state outside mutation handlers.)

vue x: after search and enter view not render

here is my code

computed: {
...mapGetters(["vehicle_list", "filter_options", "loan_calculation_return"]),

getVehicleAction: function () {
  return this.vehicle_data = this.$store.state.vehicleList;
}
  },
  mounted() {
this.vehicle_data = this.$store.state.vehicleList;
  },
  methods: {
...mapActions([
  "globalSearchParameters",
  "fetchFilterOptions",
  "getPage",
]),
infiniteScroll: function ($state) {
    setTimeout(() => {
      this.page++;
      this.$axios
        .get(`vehicles?page=${this.page}`)
        .then((response) => {
          if (response.data.data.data.length > 1) {
            const data = this.getVehicleAction;
            console.log("enter", data);
            response.data.data.data.forEach(function (item) {
              data.data.push(item);
            });
            $state.loaded();
          } else {
            $state.complete();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }, 500);
},
  },

This part is causing your problem.

Because data holds a reference to this.$store.state.vehicleList pushing items into it causes the mutation the store is not happy about.

Instead you should commit the newly retrieved data to the store itself and it will in return handle the update of your computed value getVehicleAction.

here, is an error message.

The code provided is currently not properly formatted for this forum. In its current state it’s illegible which makes it hard for people to help you.

Please read the following guide about how to properly format code and then edit your topic accordingly.

Thanks!