title: v-model on input returning input element instead of value
body: <p>I am attempting to set up user login and role authentication with Vue, without using Vuex, as it's a bit much for the scope of our application. After a failed initial attempt to use jQuery AJAX outside of Vue, I resigned myself to making it work with Vue's data-oriented model, which I've been struggling with (I'm a designer by trade, not really a developer). My backend developer is writing in plain PHP and using mySQL, for reference.</p>
  
  <p>Taking inspiration from <a href="https://blog.sqreen.io/authentication-best-practices-vue/" rel="nofollow noreferrer">this tutorial</a>, I am trying to use v-model to send the form data to the server via axios. </p>
  
  <p>Template:</p>
  
  <pre><code>&lt;form class="login-form" id="loginform" @submit.prevent="login"&gt;
      &lt;div class="form-group space"&gt;
        &lt;label class="float-label" for="username"&gt;Username&lt;/label&gt;
        &lt;input v-model="username" type="username" id="username" class="form-control" placeholder="username"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="float-label" for="username"&gt;Password&lt;/label&gt;
        &lt;input v-model="password" type="password" id="password" class="form-control" placeholder="password"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt; 
        &lt;button type="submit" class="btn btn-primary float-right" id="login"&gt;Log in&lt;/button&gt;
      &lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>Script: </p>
  
  <pre><code>export default {
    name: 'Login',
    data () {
      return {
          username: '',
      password: ''
      }
    },
    methods: {
   login: function () {
     const loginInfo = { username, password }
     console.log(loginInfo)
     new Promise ((resolve, reject) =&gt; {
    axios({url: 'api.com/index.php', data: loginInfo, method: 'POST' })
      .then(resp =&gt; {
        const token = resp.data.token
        localStorage.setItem('user_token', token) // store the token in localstorage
        const employeeId = resp.data.employee_id
        localStorage.setItem('employee_id', employeeId) // store the id in localstorage
        resolve(resp)
        console.log(resp);
      })
    .catch(err =&gt; {
      localStorage.removeItem('user_token') // if the request fails, remove any possible user token if possible
      reject(err)
    })
  })
     // myLoginRoutine(loginInfo).then(() =&gt; {
     //   this.$router.push('/')
     // })
   }
  }
  }
  </code></pre>
  
  <p>The request was going through no problem, but wasn't returning anything! I decided to check and see what I was sending him... and lo and behold, <code>const loginInfo</code> was not the input value, as expected, but <code>{username: input#username.form-control, password: input#password.form-control}</code></p>
  
  <p>I am, quite frankly, very confused. I've used v-model previously on form inputs with no issues, and have no clue why this is happening or how to fix it. Any thoughts?</p>