vue.draggable.next/vuex

[maneljove]

Hi, I'm seeking for a help with "Vue.Draggable" I have following code:

 <q-markup-table flat bordered dense>
   <thead class="bg-grey-2">
      <tr>
         <th><q-checkbox :indeterminate-value="null" v-model="all" /></th>
         <th class="text-left">{{ t('settings.columns.column') }}</th>
         <th class="text-left">{{ t('settings.columns.label') }}</th>
         <th class="text-center">{{ t('settings.columns.quantity') }}</th>
      </tr>
   </thead>
   <draggable v-model="columns" tag="tbody" item-key="index">
      <template #item="{ element }">
         <tr>
            <td><q-checkbox v-model="element.selected"/></td>
            <td class="text-left" style="cursor: grab">{{ element.name }}</td>
            <td class="text-left"><q-input v-model="element.label" outlined dense /></td>
            <td class="text-left">
               <q-input v-model="element.quantity" outlined dense class="column-width">
                 <template v-slot:prepend>
                   <q-btn flat icon="remove" size="xs" class="minus" @click="element.quantity -= 1"/>
                 </template>
                 <template v-slot:append>
                   <q-btn flat icon="add" size="xs" class="plus" @click="element.quantity += 1"/>
                 </template>
               </q-input>
            </td>
         </tr>
      </template>
   </draggable>
</q-markup-table>

<script lang="ts">
   ...

   const columns = computed({
      get: () => store.getters['app/columns'],
      set: (v) => store.commit('app/setColumns',v)
   }

   ...


      return {
         ...
         columns,
         ...
      }

</script>

but vuex raises error: do not mutate vuex store state outside mutation handlers. My understanding is that q-checkbox and q-input are updating properties directly.

How can I do it? I'm trying some other ways but no success. Currently I change the computed for:

       ...
     

const columns = ref([])
watch(
  () => store.getters['app/columns'],
  (v) => {
       const rows:Array<any> = []
       v.forEach((e) => {
         rows.push(Object.assign({},e))
       })

       columns.value = rows
     }
 )

watch(
  () => columns.value, (c,o) => {
    if ( o.length > 0) {
      store.commit('app/setColumns', c)
    }
  },
  { deep: true }
) 

but, obviusluy, it have recursion problems.