Vue.JS and Rails-UJS / Jquery-UJS conflicting - Vuex mutations not working

Vue has caveats around the data updates that can be detected automatically: https://vuejs.org/v2/guide/list.html#Caveats

Also, reactivity rules has some information: https://vuex.vuejs.org/en/mutations.html#mutations-follow-vues-reactivity-rules

I think that the Caveats page actually reflects your situation. Quoted:

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValueWhen you modify the length of the array, e.g. vm.items.length = newLength

To overcome caveat 1, both of the following will accomplish the same as vm.items[indexOfItem] = newValue, but will also trigger state updates in the reactivity system:

// Vue.set Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)

Based on this, I'd try updating your code to:

editCard(state, data) {            const list_index = state.lists.findIndex((item) => item.id == data.list_id)            const card_index = state.lists[list_index].cards.findIndex((item) => item.id == data.id)            var updata = state.lists[list_index].cards[card_index] =  data;            state.lists.splice(list_index, 1, updata);

Moving the splice to the top level of the list should now trigger the update.

Note, if you have feedback I'll be happy to update this answer appropriately.

maybe you should display your card name from a data property and use a watcher to update this data after the ajax request :

<template>  <div @click="editing=true" class="card card-body mb-3">    {{cardName}}  </div></template><script>export default {  props: ['card', 'list'],  data: function () {    return {      editing: false,      name: this.card.name,      cardName: this.card.name    }  },  watch: {    card(value) {      this.cardName = value.name    }  }}</script>

if it's a refresh problem you can also try vm.$forceUpdate()

If your Rails.ajax is actually jquery-ujs your error is here:

success: (data) => {    this.$store.commit('editCard', data)    this.editing = false}

The success callback receives the following parameters:event, data, status, xhr. Try adding an event parameter before data.

I think the reason why your addCard() mutation works is that you are issuing a POST request there and in the editCard() mutation you are issuing a PATCH request.

If that's not the reason you are not seeing your updated state maybe the data is not in JSON format? According to the jQuery docs the data is formatted automatically depending on the dataType of the $.ajax call.

Anyways, please log your data variable.