[Vuejs]-How to pass variable from Vuex store to a function as value?

This is almost certainly a duplicate question. You can refer to my answer here.

Basically you should pass the Vuex value to a local data item and use that in your component function. Something like this.

<script>
export default {
  data: () => ({
    localDataItem: this.$store.getters.vuexItem,
  })
  methods: {
    doSomething() {
      use this.localDataItem.here
    }
  }
}
</script>

The canonical way of handling this by using computed properties. You define a computed property with getter and setter and proxy access to vuex thru it.

computed: {
     localProperty: {
        get: function () {
            return this.$store.getters.data
         },
        set: function (val) {
            this.$store.commit(“mutationName”, val )
        }
     }
 }

Now you can use localProperty just as we use any other property defined on data. And all the changes get propagated thru the store.

Try if this work

<template>
  <div>
    <input :value="user" @change="onChangeUser($event.target.value)"></input>
  </div>
</template>

<script>

computed: {
    user() {
      return this.$store.getters[ 'security/localUser' ]
    }
},
methods: {
  onChangeUser(user) {
    this.$store.commit( 'security/setLocalUser', user );
  },
   async submitForm(){
      this.$Amplify.Auth.completeNewPassword( this.user, this.model.password, this.requiredAttributes )
        .then( data => {
        ...

}
</script>