Why aren't my browsers console logging with WebSockets in Vue? - vue.js

Question

I hope you can help.
I'm new to WebSockets, I've gotten a simple app running locally and now I wanted to try setting up WS with Vue but am not getting the expected behaviour. I've tried to make code as concise as possible.
I followed this tutorial: https://tutorialedge.net/javascript/vuejs/vuejs-websocket-tutorial/
Goal:
I'm trying to establish a simple WebSockets connection with Vue.
With the code below, I'm running npm run serve(see package.json file), to run my application on http://localhost:8080/.
The problem:
WebSockets connects as I expect it to but when I fire sendMessage with the button, both browsers aren't console logging, which is what I'm expecting.
I've tried changing the WS connection to this.connection = new WebSocket("ws://localhost:8080") but no luck, it never connects and remains in the connecting phase.
I'm receiving no errors in the console.
Can you please help me figure out what I'm doing wrong?
Your help is much appreciated.
Thank you
Moe
The code below is my root Vue.appfile.
<template>
<div id="app">
<button v-on:click="sendMessage">Send Message</button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
testComponent
},
data: function () {
return {
connection: null
}
},
methods: {
sendMessage: function (message) {
this.connection.send(message)
}
},
created: function () {
console.log("Starting Connection to WebSockets Server.")
this.connection = new WebSocket("wss://echo.websocket.org")
this.connection.onopen = function (event) {
console.log(event)
console.log("Successfully connected to the WebSocket Server.")
}
this.connection.onmessage = function (event) {
console.log(event)
}
}
}
</script>
This is my package.json file.
{
"name": "vuejs-websocket-tutorial",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}