新規登録ボタンを「クリック」と「Enterキー」で登録できるようにイベントを発火させたい。

現状、新規登録ボタンを押したら、signUpイベントが発火されるようにしているのですが、
Enterキーでも発火させるようにしたいです。
（要はクリックでもEnterでも同じ動きで登録できるようにしたいです。）

ネット上で調べたり、clickだけでなく、keydownを追加してみて実行してみたのですが、
上手く実装されませんでした。。

勉強し始めたばかりなので至らぬ点が多いかとお思いますが、どこをどう直したら良いかご教授いただけると幸いです。
宜しくお願い致します。

サインアップページ

◆singup.vue

<template>
  <div class="signup">
    <h2>新規登録</h2>
    <input type="text" placeholder="Email" v-model="email" />
    <input type="password" placeholder="Password" v-model="password" />
    <button class="btn-signup" @click="signUp">登録</button>
    <p>
      既に登録済みの方は
      <router-link to="/signup">こちらへ</router-link>
    </p>
  </div>
</template>

<script>
import firebase from "firebase";

export default {
  name: "Signup",
  data() {
    return {
      email: "",
      password: ""
    };
  },
  methods: {
    signUp: function() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(user => {
          alert("登録に成功しました。", user.email);
          this.$router.push("/signin");
        })
        .catch(error => {
          alert("登録情報が正しくありません。", error.message);
        });
    }
  }
};
</script>

<style lang="scss">
.signup {
  height: 90vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  h2 {
    font-weight: normal;
    margin-bottom: 0.5rem;
  }

  a {
    color: #eb6100;
  }
  input {
    margin: 10px 0;
    padding: 10px;
  }
  .btn-signup {
    width: 5rem;
    margin: 1rem;
    color: #fff;
    background-color: #eb6100;
    padding: 0.5rem;
    border-radius: 1rem;
    text-decoration: none;
    cursor: pointer;
    cursor: hand;
    border: none;
    outline: none;
    font-weight: bold;
  }
}
</style>