title: Vuex is changing object parameter into a component
body: <p>I have a login form and where the inputs (email &amp; password) are bound. On clicking the button to submit the form, it prevents the default behaviour and uses the <code>login</code> method defined in the Login.vue; Scripts.</p>
  <p>While consoling in Login.vue; Scripts; <code>login</code> method, the <code>form</code> data printed out the <code>{email: 'email', password: 'password'}</code> object (desired). Once it is passed to the action (<code>await this.signIn(this.form)</code>), it consoled out a Vue component all of the sudden. I don't understand why this happened and how can this be solved?</p>
  <h1>Login.vue Component</h1>
  <h2>Form</h2>
  <pre><code>&lt;form @submit.prevent=&quot;login&quot; method=&quot;POST&quot;&gt;
      &lt;input
          type=&quot;text&quot;
          v-model=&quot;form.email&quot;
      /&gt;
      &lt;input
          type=&quot;password&quot;
          v-model=&quot;form.password&quot;
      /&gt;
  
      &lt;button class=&quot;btn btn-primary&quot;&gt;Login&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <h2>Scripts</h2>
  <pre><code>&lt;script&gt;
  import { mapActions } from 'vuex'
  
  export default {
      data() {
          return {
              form: {
                  email: '',
                  password: '',
              },
          }
      },
      computed: {
          ...mapActions('auth', ['signIn']),
      },
      methods: {
          async login() {
              /***************************************
              *                                      *
              *    Print out the form data object    *
              *                                      *
              ****************************************/
              console.log(this.form)
              await this.signIn(this.form)
          },
      },
  }
  &lt;/script&gt;
  </code></pre>
  <h1>Vuex - Auth Module</h1>
  <pre><code>export const actions = {
      signIn({ dispatch, commit }, form) {
          /***************************************************************
          *                                                              *
          *    Print out a Vue component instead of the passed object    *
          *                                                              *
          ****************************************************************/
          console.log(form)
          Auth.signInWithEmailAndPassword(form.email, form.password)
              .then(user =&gt; {
                  commit('SET_AUTHENTICATED', true)
                  commit('SET_USER', user.user)
                  this.$router.push('/')
              })
              .catch(err =&gt; {
                  console.log(err)
              })
      },
  }
  </code></pre>
  <h2>Console logged content</h2>
  <pre><code>VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
  $attrs: (...)
  $children: []
  $createElement: ƒ (a, b, c, d)
  $el: div
  $listeners: (...)
  $options: {parent: VueComponent, _parentVnode: VNode, propsData: undefined, _parentListeners: undefined, _renderChildren: undefined, …}
  $parent: VueComponent {_uid: 3, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
  $refs: {}
  $root: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
  $scopedSlots: {$stable: true, $key: undefined, $hasNormal: false}
  $slots: {}
  $store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(1), _mutations: {…}, _wrappedGetters: {…}, …}
  $vnode: VNode {tag: &quot;vue-component-4&quot;, data: {…}, children: undefined, text: undefined, elm: div, …}
  form: (...)
  login: ƒ ()
  signIn: (...)
  __VUE_DEVTOOLS_UID__: &quot;1:4&quot;
  _c: ƒ (a, b, c, d)
  _computedWatchers: {signIn: Watcher}
  _data: {__ob__: Observer}
  _directInactive: false
  _events: {hook:beforeDestroy: Array(1)}
  _hasHookEvent: true
  _inactive: null
  _isBeingDestroyed: false
  _isDestroyed: false
  _isMounted: true
  _isVue: true
  _renderProxy: Proxy {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
  _routerRoot: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
  _self: VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
  _staticTrees: null
  _uid: 4
  _vnode: VNode {tag: &quot;div&quot;, data: undefined, children: Array(2), text: undefined, elm: div, …}
  _watcher: Watcher {vm: VueComponent, deep: false, user: false, lazy: false, sync: false, …}
  _watchers: (2) [Watcher, Watcher]
  $data: (...)
  $isServer: (...)
  $props: (...)
  $route: (...)
  $router: (...)
  $ssrContext: (...)
  get $attrs: ƒ reactiveGetter()
  set $attrs: ƒ reactiveSetter(newVal)
  get $listeners: ƒ reactiveGetter()
  set $listeners: ƒ reactiveSetter(newVal)
  get form: ƒ proxyGetter()
  set form: ƒ proxySetter(val)
  __proto__: Vue
  </code></pre>