Как передать массив из контроллера Laravel в компонент Vue.js

Я хочу передать массив с именем hours из контроллера Laravel в компонент Vue.js, но по какой-то причине он не работает. Как вы можете видеть в следующем коде, я пытаюсь динамически создать параметры внутри выбора, расположенного внутри компонента, но по некоторым причинам я не вижу параметров в этом массиве. В представлении я создал <p>, чтобы проверить правильность возвращаемого массива из контроллера, и, наконец, это правильно, потому что в представлении я могу видеть второе значение массива. Но по некоторым причинам я не могу визуализировать значения массива внутри компонента.

Это мой код контроллера:

    $open_at = '00:00';
    $close_at = '23:45';

    $time = new DateTime($open_at);
    $close = new DateTime($close_at);
    while ($time < $close) {
        $hours[] = $time->format('H:i');
        $time->modify('+15 minutes');
    }

    return view('create')->with('hours', $hours);

Это мой код просмотра:

@extends('layouts.app')

@section('content')
<div class = "container">
    <div id = "app">
        <create-form :hours = "hours"></create-form>
    </div>
    <p>
        {{ $hours[1] }}
    </p>
</div>
@endsection

Это код внутри компонента шаблона:

        <div class = "form-group">
            <label for = "start">Start Hour:</label>
            <select class = "form-control" id = "start">
                <option v-for = "hour in hours" :key = "hour.id">
                    {{ hour }}
                </option>
            </select>
        </div>

Это мой экспорт_по умолчанию:

export default {
    props: ['hours[]'],
    mounted() {
        console.info('Component mounted.');
        this.loadUsers();
        this.loadRooms();
    },
    data: function() {
        return {
            users: [],
            rooms: []
        }
    },
    methods: {
        loadUsers: function() {
            axios.get('api/users')
            .then((response) => {
                this.users = response.data.data;
            })
            .catch(function(error) {
                alert('noviva');
                console.info(error);
            });
        },
        loadRooms: function() {
            axios.get('api/rooms')
            .then((response) => {
                this.rooms = response.data.data;
            })
            .catch(function(error) {
                alert('noviva');
                console.info(error);
            });
        }
    }
}

Я визуализирую следующее предупреждение в консоли:

Property or method "hours" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Может помочь?