I'm new to NuxtJS, I was trying to do a simple form to try things out. The idea is that I have a component that contains the full form

<template>
  <div>
    <h1>
      {{ title }}
    </h1>
    <form @submit.prevent="handleSubmit">
      <input type="email" v-model="email" />
      <input type="password" v-model="password" />
      <button type="submit">Sign in</button>
    </form>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: 'Sign in',
      email: null,
      password: null
    }
  },
  methods: {
    handleSubmit: function() {
      console.log('Hello')
    } 
  } 
}
</script>

It's nothing crazy, and then I'm just calling this component in my page

<template>
  <LoginForm />
</template>

<script>

export default {
}
</script>

But when I submit my form I can't see my message in the console, I'm wondering what I did wrong or did I miss something ? Also it is a good practice to make a component like this or should I divide more my component into small one's ?