Vue component doesn´t rerender after vuex state change - vue.js

Question

My vue component doesn´t change a child component when the state of vuex changes.
I have a list of slots for items and want to render items depending on a vuex state variable.
When you click on a "item"-component it sets the selectedItem state variable. Another component watches this variable and sets equippedItems variable with new data.
But when I try to change an item it doesn't show up, even though the state seems to change in Vuex.
I have set up the vuex store like that:
const state = {
equippedItems:
[
{
name: 'Item 1',
strength: 3,
itemType: 1,
rarity: 3
},
{
name: 'Item 2',
strength: 40,
itemType: 2,
rarity: 2
}
],
selectedItem: null
}
const getters = {
getEquippedItems: (state) => state.equippedItems,
getSelectedItem: (state) => state.selectedItem
}
const mutations = {
changeSelectedItem: (state, newItem) => {
state.selectedItem = newItem;
},
changeEquippedItems: (state, parameters) => {
state.equippedItems[parameters[0]] = parameters[1];
}
}
const actions = {
setSelectedItem({ commit }, index) {
commit('changeSelectedItem', index);
},
setNewEquipment({ commit }, parameters) {
commit('changeEquippedItems', parameters);
}
}
export default {
state,
getters,
actions,
mutations
}
Then I have a component that sets the items according to the equippedItems variable
import { mapGetters, mapActions } from 'vuex';
import Item from '../Item';
export default {
name: 'equipped-items',
components: {
Item
},
props: [],
data() {
return {
chooseHead: false,
}
},
computed: {
...mapGetters(['getEquippedItems', 'getItems', 'getSelectedItem'])
},
methods: {
...mapActions(['setNewEquipment']),
chooseNewHead() {
this.chooseHead = !this.chooseHead;
}
},
watch: {
getSelectedItem: function () {
if (this.chooseHead) {
this.setNewEquipment([0, this.getSelectedItem]);
}
}
}
}
<section class="equipped-items">
<div #click="chooseNewHead" class="head equipSlot">
<Item v-if="getEquippedItems[0]" :passedItem="getEquippedItems[0]" :parent="'equip'"> </Item>
</div>
<div class="body equipSlot">
<Item v-if="getEquippedItems[1]" :passedItem="getEquippedItems[1]"></Item>
</div>
</section>
Then there is the item component which sets the vuex variable selectedItem on click.
import { mapActions } from 'vuex';
export default {
name: 'Item',
props: ['passedItem', 'parent'],
methods: {
...mapActions(['setSelectedItem']),
selectedItem() {
if (this.parent != 'equip') {
this.setSelectedItem(this.passedItem);
}
}
}
}
It renders fine the first time when the page is loading, but doesn't change the new passed item to the item-component.
Thanks in advance

Answer 1

There a couple mistakes in your code:
1- I couldn't identify where you call/trigger an event to your selectedItem() method in your component.
2-(This is an extra) If you want to append objects to an array injavascript you just use array.push(odject), so i would suggest you to change your changeEquippedItems mutation to:
changeEquippedItems: (state, parameters) => {
state.equippedItems.push(parameters);
}