Vue not rendering UI changes when submitting a form

This is probably a dumb question, but whenever I submit a form to post a new product to the productsList the UI does not render it immediately, only after I reload the page. I'm posting the data and fetching it from firebase

ProductList.vue

<template>
  <div class="product-list">
    <NewItemForm></NewItemForm>
    <ul>
      <ProductListItem
        v-for="product in productsList"
        v-bind:key="product.product.id"
        :title="product.product.title"
        :price="+product.product.price"
        :id="product.product.id"
      />
    </ul>
  </div>
</template>

<script>
import ProductListItem from "./ProductListItem.vue";
import NewItemForm from "./NewItemForm.vue";
import { mapActions, mapGetters } from "vuex";

export default {
  name: "ProductList",
  components: {
    ProductListItem,
    NewItemForm,
  },

  methods: {
    ...mapActions(["getProducts"]),
  },

  computed: { ...mapGetters(["productsList"]) },

  created() {
    this.getProducts();
  },
};
</script>

store.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    products: [],
  },

  mutations: {
    addNewProduct: (state, product) => {
      product.id = product.name;
      state.products.unshift(product);
    },
    setProducts: (state, products) => {
      for (const name in products) {
        products[name].product.id = name;
        state.products = [...state.products, products[name]];
      }
    },
  },

  getters: {
    productsList: (state) => state.products,
  },

  actions: {
    async addNewProduct({ commit }, product) {
      const response = await axios.post(
        "https://vue-s-261e8-default-rtdb.firebaseio.com/products.json",
        product
      );
      commit("addNewProduct", response.data);
    },

    async getProducts({ commit }) {
      try {
        const response = await axios.get(
          "https://vue-s-261e8-default-rtdb.firebaseio.com/products.json"
        );
        commit("setProducts", response.data);
      } catch (err) {
        console.log(err);
      }
    },
  },
});

NewItemForm.vue

<template>
  <div>
    <form class="form">
      <label for="name">Product name</label>
      <input type="text" name="name" v-model="product.title" />
      <label for="description">Product description</label>
      <input type="text" name="description" v-model="product.description" />
      <label for="price">Product price</label>
      <input type="text" name="price" v-model="product.price" />
    </form>
    <button class="button" type="submit" v-on:click.prevent="onSubmit">
      Add new item
    </button>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "NewItemForm",

  data() {
    return {
      product: {
        title: "",
        description: "",
        price: "",
      },
    };
  },

  methods: {
    ...mapActions(["addNewProduct"]),
    onSubmit() {
      this.addNewProduct({
        product: this.product,
      });
    },
  },
};
</script>

I have tried to setup a watcher, but that only introduced an infinite loop.

Vue 2 has some quirky behaviour with state, specifically when dealing with arrays. I believe in this case you'd need to use Vue.set, which you can find more details about from the below link, there you can also find more documentation about reactivity in Vue 2.

https://v2.vuejs.org/v2/guide/reactivity.html

You also appear to be missing a component from your example (ProductListItem.vue)

I'd recommend upgrading to Vue 3 and take advantage of Pinia, as that is now the replacement for VueX.

If you could upload a repository with the problem in full, I'd happily take a look.

Edit:

After reviewing the repository, this looks like the fix:

change the addNewProduct mutation to the following:

addNewProduct: (state, product) => {
    product.id = product.name;
    // this particular change might not be required
    // feel free to try without
    state.products = [...state.products, product]
},

and finally change the addNewProduct action to the following:

async addNewProduct({ commit }, product) {
    await axios.post(
      "https://vue-s-261e8-default-rtdb.firebaseio.com/products.json",
       product
    );
    commit("addNewProduct", product);
}

This should fix your reactivity issues and correctly update your array. Hope this helped