Не могу настроить Laravel + VueJS для отображения чего-либо в моем шаблоне

Question

ОБНОВЛЕНИЕ: если я использую этот app.js, он возвращает мне страницу без шаблонов блейдов, но ЭТО РАБОТАЕТ, к сожалению, я не могу интегрировать его в свой блейд-движок.

import Pigeons from './components/Pigeons.vue';

const app = new Vue({
    el: '#app',
    components: {
        Pigeons
    },
    render: h => h(Pigeons)
});

I 'Я настроил Laravel + VueJS, чтобы получить запрос API и показать его на странице, но я не могу заставить его работать.Я получаю обратно JSON и его переменную в моих голубях, но ничего не получаю на странице.

Это мой шаблон Pigeon.vue:

<template>
    <div>
        <h2>Pigeons in the racing loft</h2>
        <button @click.native="greet">Greet</button>
        <div class="card-content m-b-20" v-for="pigeon in pigeons" v-bind:key="pigeon.id">
            <h3>{{ pigeon.id }}</h3>
        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            pigeons: [],
            pigeon: {
                id: '',
                sex: '',
                color_id: '',
                pattern_id: '',
                user_id: '',
                loft_id: '',
                country: '',
                experience: '',
                form: '',
                fatique: ''
            },
            pigeon_id: '',
        }
    },
    created(){
        this.fetchPigeons();
    },
    methods: {
        fetchPigeons(){
            return fetch('api/racingloft')
            .then(res => res.json())
            .then(res => {
                this.pigeons = res.data;
            });
        },
        greet(){
            console.log('hello');
        }

    }
}
</script>

Это мое приложение.js:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

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

Vue.use(Buefy);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('pigeons', require('./components/Pigeons.vue'));

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

И это мой devtools Vue, я думаю, у меня должно быть больше вещей здесь, по крайней мере что-то большее, чем ничего.Что я мог настроить неправильно?

Devtools VUE

Это мой файл bootstrap.js:

window._ = require('lodash');
window.Popper = require('popper.js').default;

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });

ОБНОВЛЕНО (включая шаблоны блейдов):

Это шаблон лезвия, расширяющий макет:

@extends('layouts.app')

@section('content')

    <div class="columns">
        <div class="column is-one-fifth">
            @include('mylofts/menu')
        </div>
        <div class="column is-three-fifth">
            <pigeons></pigeons>

        </div>
        <div class="column is-one-fifth">

        </div>
    </div>

@endsection

И вот app.blade:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script>window.Laravel = { csrfToken: '{{ csrf_token() }}'}</script>

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

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
            <div class="container">
                <div class="navbar-menu">
                    <div class="navbar-start">
                        <a href="/mylofts" class="navbar-item">My Lofts</a>
                        <a href="/myoffice" class="navbar-item">My Office</a>
                        <a href="#" class="navbar-item">Forum</a>
                        <a href="#" class="navbar-item">News</a>
                        <a href="#" class="navbar-item">FAQ</a>
                    </div>
                    <div class="navbar-end">
                        @guest

                            <a href="{{ route('login') }}" class="navbar-item">Login</a>
                            <a href="{{ route('register') }}" class="navbar-item">Register</a>

                        @else

                            <div class="dropdown is-hoverable is-right">
                                <div class="dropdown-trigger">
                                    <div class="navbar-item m-r-20" aria-haspopup="true" aria-controls="dropdown-menu">
                                        <a href="#">Hey {{Auth::user()->fname}}
                                            <span class="icon is-small">
                                            <i class="fas fa-angle-down" aria-hidden="true"></i>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="dropdown-menu" id="dropdown-menu" role="menu">
                                    <div class="dropdown-content">
                                        <a href="#" class="dropdown-item">
                                            Profile
                                        </a>
                                        <a class="dropdown-item">
                                        Settings
                                        </a>
                                        <a href="#" class="dropdown-item">
                                        Bug report
                                        </a>
                                        <a href="#" class="dropdown-item">
                                                Contact
                                        </a>
                                        <hr class="dropdown-divider">
                                        <a class="dropdown-item" href="{{ route('logout') }}"
                                                    onclick="event.preventDefault();
                                                    document.getElementById('logout-form').submit();">
                                                    {{ __('Logout') }}
                                        </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                    </div>

                                </div>
                            </div>

                        @endauth
                    </div>
                </div>
            </div>
        </nav>
        <main class="container">
            @yield('content')
        </main>
    </div>
    <script src="{{asset('js/app.js')}}"></script>
</body>
</html>