How to get the value of a VueJS variable?

Question

Vue.js

JS

var socket = new WebSocket("ws://" + window.location.host + ":8081/")

new Vue({
    delimiters: ['{>', '<}'],
    el: '#patient_history',
    data: {
        department: ''
    },
    methods: {
        getWebSocket: function () {
            var self = this
            socket.onopen = function () {
                console.log("Соединение установлено.");
                console.log(self.department)
                socket.send(document.location)
            };

            socket.onclose = function (event) {
                if (event.wasClean) {
                    alert('Соединение закрыто чисто');
                } else {
                    alert('Обрыв соединения'); // например, "убит" процесс сервера
                }
                alert('Код: ' + event.code + ' причина: ' + event.reason);
            };

            socket.onmessage = function (event) {
                console.log(event.data)
            };

            socket.onerror = function (error) {
                alert("Ошибка " + error.message);
            };
        },
    },
    created: function () {
        console.log(this.department)
        this.getWebSocket()
    }
})

HTML

<b>Отделение:</b> {{ current_history.department }} <span v-model="department">{{ current_history.department.id }}</span>

The console is empty. How to get value after page load?

Answer 1

This is how you call console.log(this.department) before getting any data.