Vue js template rendering issue

First time with vue. I am learning it playing around with some examples from Laracasts. I cannot get external template to render and the console shows cannot find element: #toolbar-chat.

My template is:

<template>
    <div id="toolbar-chat">
        <div class="toolbar-chat">
            <ul v-for="chat in messages">
                <li><b>@{{ chat.nickname }} says:</b> @{{ chat.message }}</li>
            </ul>
        </div>
        <div class="input-group input-group-sm">
            <input class="form-control" value="" placeholder="Type message..." required="required"  maxlength="140" v-model="newMsg">
            <div class="input-group-btn">
                <button class="btn btn-primary" type="button" @click="press">
                    <i class="fa fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>
</template>


<script>
export default {

    mounted() {
        console.log('Component mounted.')
    },

    data() {
        return {
            nickname: [],
            message: ''
        }
    },

    ready() {
        Echo.channel(chat_channel)
            .listen('ChatMessageWasReceived', (data) => {
                // Push data to messages list.
                this.messages.push({
                    message: data.chat.message,
                    nickname: data.player.nickname
                });
            });
    },

    methods: {
        press() {
            // Send message to backend.
            this.$http.post(chat_send_route, {message: this.newMsg})
                .then((response) => {
                    // Clear input field.
                    this.newMsg = '';
                });
        }
    }
};
</script>

My HTML contains the following tag:

<div class="col-xs-12 col-md-4" id="toolbarChat">
    <my-chat></my-chat>
</div>

My vue component call is inside a document ready function like this:

require('./../app/bootstrap');

$(document).ready(function()
{
    ....
    // Set up chat
    Vue.component('my-chat', require('./../generic/chat.vue'));

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

And I include vue in my bootstrap file like this, then compile with webpack and no errors.

window.Vue = require('vue');

Why is my HTML template not rendering?