Vue.js uncaught reference error

Learning Vue and stuck. I have a brand new Laravel 5.4 project that I am using to learn Vue concepts, using Pusher/Echo. All is working in terms of message broadcasting, and the messages are fetched from the server and displayed on page load as expected. I want to programatically (from somewhere else in the project) send a message into the queue.

I am using this example as guide to accessing the Vue method outside the instance.

Why can I not access the instance method from my main JS file? The project is compiled with webpack FYI.

My Vue.js file:

$(document).ready(function()
{
    Vue.component('chat-system', require('../components/chat-system.vue'));

    var chatSystem = new Vue({
        el: '#system-chat',

        data: {
            sysmessages: []
        },

        created() {
            this.fetchMessages();

            Echo.private(sys_channel)
                .listen('SystemMessageSent', (e) => {
                    this.sysmessages.unshift({
                        sysmessage: e.message.message,
                        player: e.player
                    });
                });
        },

        methods: {
            fetchMessages() {
                axios.get(sys_get_route)
                    .then(response => {
                        this.sysmessages = response.data;
                    });
            },

            addMessage(sysmessage) {
                this.sysmessages.unshift(sysmessage);

                this.$nextTick(() => {
                    this.$refs.sysmessages.scrollToTop();
                });

                axios.post(sys_send_route, sysmessage)
                    .then(response => {
                        console.log(response.data);
                    });
            },
            sendMessage(sysmessage) {
                if (sysmessage !== '') {
                    this.$emit('systemmessagesent', {
                        player: this.player,
                        message: sysmessage
                    });
                }
            }
        }
    });
});

My Vue.js component:

<template>
    <div id="round-status-message" class="round-status-message">
        <div class="row">
            <div class="col-xs-12" v-for="sysmessage in sysmessages">
                {{ sysmessage.message }}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['player', 'sysmessages'],

        data() {
            return {
                newSysMessage: ''
            }
        },

        methods: {
            scrollToTop () {
                this.$el.scrollTop = 0
            },

            sendMessage() {
                this.$emit('systemmessagesent', {
                    player: this.player,
                    message: this.newSysMessage
                });

                this.newSysMessage = ''
            }
        }

    };
</script>

I want to send a message into the queue programatically, so in my app.js, to test, I do:

// TESTING SYSTEM MESSAGES - DELETE
window.setInterval(function(){
    var resp = {};
    resp.data = {
        id: 1,
        message: "She hastily put down yet, before the end of half.",
        progress_id: 1,
        created_at: "2017-08-17 14:01:11",
        updated_at: "2017-08-17 14:01:11"
    };
    chatSystem.$refs.sysmessages.sendMessage(resp);

    console.log(resp);

}, 3000);
// TESTING SYSTEM MESSAGES - DELETE

But I get Uncaught ReferenceError: chatSystem is not defined