Vue.js automatic update of model in store?

Question

Vue.js

Hello,
something is completely confused and I do not understand why this is happening. The crux of the matter - I have a form in which you can set the "width" parameter. The form should only work when the button is clicked. In fact, it happens that after we clicked the confirmation button 1 time and sent the data to our store (vuex), we can simply change the value in the input field and the data in vuex itself starts to change.

<div class="row">
  <div class="col-md-12">
    <label for="namespace-width">Width:</label>
    <input id="namespace-width" type="number" placeholder="Width" v-model="namespaceSize.width" @change.prevent @input.prevent/>   
  </div>
   <div class="btn btn-success" @click="updateNamespacesSize()">Apply</div>
</div>

As I understand it, in order to change the data in the store, we need to call an action. The fact is that the action is not called and it turns out that an O_O connection has been established between the data and the built-in event fires when the value changes. How can this be removed?
data:

namespaceSize: {
  width: null,
  heigth: null, 
  length: null
},

method:

updateNamespacesSize() {
  return this.$store.dispatch('updateSize', {type: 'Namespace', size: this.namespaceSize})
},

Action in store:

updateSize: (context, payload) => {
  return context.commit('updateSize', payload)
}

Mutation:
up

dateSize: (state, payload) => {
  console.log('update size')
  switch (payload.type) {
    case 'Namespace': return state.namespaces.forEach(namespace => { namespace.size = payload.size })
    case 'Class': return state.classes.forEach(clas => { clas.size = payload.size })
    case 'Method': return state.methods.forEach(method => { method.size = payload.size })
  }
}

With console.log I tried to track the false positives of functions and it just happened that the changes occur themselves, after changing the parameter in the input field. It's really cool, but I don't need it :D

Answer 1

When you throw an object on the store, make a copy.
Like, not size: this.namespaceSize, but size: { ...this.namespaceSize }.
Or copy inside the store, in mutation.