vuejs输入值未定义

Question

我目前正在通过制作一个登录应用程序来学习vuejs，但是我可以访问它给我的输入值未定义，我显然在这里做错了什么，但是我找不到我在这里出错的地方是我的代码，可以你指出我正确的方向 这是代码

var app = new Vue({
  el: '#app',
  data() {
    return {

      username: "",
      password: ""

    }
  },
  methods: {
    login() {
      console.log(this.username)
    },
  }

})

<div id="app">
  <div class="main">
    <div class="left">
      <h1>Login</h1>
      <p><i>To your Account</i></p>
      <form @submit.prevent="login">
        <input type="text" name="username" v-model="username" placeholder="Username" />
        <input type="password" name="password" v-model="password" placeholder="Password" />
        <input type="submit" value="LOG IN">

      </form>
    </div>
  </div>


</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

提前谢谢