Buefy components are not working...

Hi there, I am having a problem with calling the components of buefy and I just can't figure out what's wrong with it... Anybody knows how I can solve this?

VERSIONS: Vue: "2.5.7" Buefy: "0.6.3"

CODE:

in my app.js file:

require('./bootstrap');

window.Vue = require('vue');
import Buefy from 'buefy';

Vue.use(Buefy);

 var app = new Vue({
  el: '#app',
   data: {}
 });

In my app.scss file:

// Variables
@import "variables";

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

// Bulma
@import "node_modules/bulma/bulma";

// Bulma Vue Modules
@import "node_modules/buefy/src/scss/buefy";

in my login.blade.php file:

@extends('_includes.nav.login')

@section('content')
<template>
    <section>

        <div class="field">
            <b-checkbox>Basic</b-checkbox>
        </div>
        
    </section>
</template>

@endsection

in my app.blade.php file :

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @yield('styles')
</head>
<body>

    @include('_includes.nav.main')

    <div id="app">
      @yield('content')
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    @yield('scripts')
</body>
</html>

STEPS TO REPRODUCE: After using any of the components nothing is working.

EXPECTED BEHAVIOR: Expected to render a checkbox

ACTIAL BEHAVIOR: Doesn't render anything

Please or to participate in this conversation.