Vue.js is not reflecting in laravel project

I have been trying to use vue.js in my laravel 5.4 cms admin-panel project... i'm trying to create a checkbox with vue.js such that anytime a user tries to reset there password they could either select the checkbox and have an auto_generate password or enter it manually. By selecting the auto_generate password, the password input word become invisible. I'm using vue with bootstrap and it hasn't been responding as if the vue itself is not reflected in the project because anytime i use b-checkbox, its always empty. This is my code...

Create.blade.php

@extends('layouts.manage')

@section('content')
    <div class="flex-container m-t-10">
        <div class="columns m-l-10">
            <div class="row">
                <h1 class="title m-l-15">Create New Users</h1>
            </div>              
        </div>
        <hr class="m-t-0">

        <form action="{{route('users.store')}}" method="POST">
            {{csrf_field()}}

                <div class="col-lg-offset-0 col-md-12 thumbnail">
                    <div class="form-group">
                        <label for="name" class="control-label">Name:</label>                       
                        <input type="text" name="name" class="form-control" id="name" value="{{ old('name')}}" placeholder="Enter your name...">
                    </div>

                    <div class="form-group">
                        <label for="email" class="control-label">Email:</label>                     
                        <input type="text" name="email" class="form-control" id="email" value="{{ old('email')}}" placeholder="Enter your email...">
                        <small>Your email is confidential with us</small>
                    </div>

                    <div class="form-group">
                        <label for="password" class="control-label">Password:</label>                       
                        <input type="password" name="password" class="form-control" id="password" v-if="!auto_password" placeholder="Enter your password...">
                        <b-checkbox name="auto_generate" class="m-t-15" v-model="auto_password">Auto Generate Password</b-checkbox>
                    </div>                                      
                </div>
            </div>

            <div>
            <button class="btn btn-md btn-success fa fa-user-plus pull-right"> Create New User</button>         
            </div>          
        </form>

            <div>
            <a class="btn btn-warning btn-md fa fa-caret-left pull-left" href="{{route('users.index')}}"> Back</a>          
            </div>

</div>
@endsection

@section('scripts')
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        auto_password: true,
    }
    });
  </script>
@endsection

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

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

node_modules "node_modules/bootstrap-vue/dist/bootstrap-vue", its in my app.scss file... maybe i'm not doing it right. App.scss

// Variables
@import "variables";

// Font Awesome
@import "node_modules/font-awesome/scss/font-awesome";

// bootstrap-vue
@import "node_modules/bootstrap-vue/dist/bootstrap-vue";

// Custom SASS Pages
@import "overrides";
@import "helpers";
@import "manage/";
@import "styles";

Please i'll appreciate suggestions of what i'm doing wrong. Thanks