Vue.js not reactive in laravel

I'm new to Vue and i'm trying to bind some inputs to data. everything shows up correctly in the browser but the binding doesn't seem to work. it's not reacting when i'm changing a input field. see my code below.

I'm also using the debug extension for Google Chrome and the Login component is not visible in here only the root component.

I hope you guys can help me out :)

app.js

require('./bootstrap');

window.Vue = require('vue');
window.VueRouter = require('vue-router').default;
window.axios = require('axios');

Vue.use(VueRouter);

const login = Vue.component('login', require('./components/Login.vue'));


const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            name: "login",
            path: "/admin",
            component: login
        }
    ]
})

const app = new Vue({
    el: '#app',
    router: router
});

Login.vue

<template>
   <div class="wrapper-page">

            <div class="text-center">
                <a href="index.html" class="logo-lg"><i class="mdi mdi-radar"></i> <span>Minton</span> </a>
            </div>

            <!-- <form class="form-horizontal m-t-20" action="index.html"> -->

                <div class="form-group row">
                    <div class="col-12">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="mdi mdi-account"></i></span>
                            </div>
                            <input v-model="email" class="form-control" type="email" required="" placeholder="e-mail">
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-12">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="mdi mdi-radar"></i></span>
                            </div>
                            <input v-model="password" class="form-control" type="password" required="" placeholder="Password">
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-12">
                        <div class="checkbox checkbox-primary">
                            <input id="checkbox-signup" type="checkbox">
                            <label for="checkbox-signup">
                                Remember me
                            </label>
                        </div>

                    </div>
                </div>

                <div class="form-group text-right m-t-20">
                    <div class="col-xs-12">
                        <button class="btn btn-primary btn-custom w-md waves-effect waves-light" type="submit" v-on:submit="logIn();">Log In
                        </button>
                    </div>
                </div>

                <div class="form-group row m-t-30">
                    <div class="col-sm-7">
                        <a href="#" class="text-muted" v-on:click="logIn"><i class="fa fa-lock m-r-5"></i> Forgot your
                            password?</a>
                    </div>
                    <div class="col-sm-5 text-right">
                        <a href="pages-register.html" class="text-muted">Create an account</a>
                    </div>
                </div>
            <!-- </form> -->
            <pre>
                
            </pre>
        </div>
</template>

<script>

    export default {  
        name: "login",
        data(){
            return {
              email: '',
              password: ''
            }
          },
          methods: {
            logIn(){
                console.log(this.email);
            }
          }
        };
</script>

via Chebli Mohamed