[vuex] do not mutate vuex store state outside mutation handlers

Steps to reproduce

Create chat app in nuxt by following these steps.

Below if code of file in which i am facing the issue.

<template>
  <form class="flex flex-row flex-space-between" @submit.prevent="onSubmit">
    <input v-model="message.text" type="text" class="flex flex-1" />
    <button class="button-primary" type="submit">Send</button>
  </form>
</template>

<script>
import { ref } from '@vue/composition-api'
export default {
  name: 'MessageComposer',
  setup(props, context) {
    const { Message } = context.root.$FeathersVuex.api;
    const message = ref(new Message({ text: '' }));
    function reset() {
      message.value = new Message({ text: '' });
    }
    function onSubmit() {
      if (!message.value.text) { return; };
      message.value.save();
      reset();
    }

    return { message, reset, onSubmit }
  }
}
</script>

Expected behavior

It should work without any errors in strict mode too.

Actual behavior

It gives this error on v-model change.

For resolving this error i had to add export const strict = false in services/index.js

I am using suggested syntax in nuxt-full-example instead of exporting vuex store.

System configuration

feathers-vuex: 3.6.1 @vue/composition-api: 0.3.4 vuex: 3.1.2

[tkssharma]

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

----- LONG STACK TRACE ----- could have been helpful if i know which store property is creating this issue

[itoonx]

The problem is your store/index.js It should be like this, Please check if you’re using createStore may be is deprecated in this version

export const state = () => ({
})

export const mutations = {
}

export const actions = {
}

export const getters = {}

export const plugins = [
]