如果用户在Vue js 2中输入无效凭据，如何在登录表单上显示错误？

data() {
  return {
    error: ''
  }
}

methods: {
  login() {
    // 验证用户输入的凭据是否有效
    if (!this.isValidCredentials()) {
      this.error = '无效凭据，请重新输入。'
      return
    }
    
    // 其他登录逻辑
  },
  
  isValidCredentials() {
    // 验证凭据的逻辑
    // 返回true或false
  }
}

<form @submit="login">
  <!-- 表单内容 -->
  
  <div v-if="error" class="error-message">{{ error }}</div>
  
  <button type="submit">登录</button>
</form>