Fetching data from MQTT to Vue app instance - node.js

Question

How do can I fetch data from MQTT to Vue app, I've established a properly working connection and I can console log the data but I'm not able to load the data to component's data property.
created() {
client.on("connect", function() {
console.log("MQTT Connected");
client.subscribe("#", function(err) {
console.log(err);
});
});
client.on("message", (topic, message) => {
console.log("topic:", topic);
console.log(message.toString());
this.mqttData = JSON.parse(message.toString());
});
},
data() {
return {
mqttData: {}
}
};
Whenever I try to log the mqttData in console it seems to be a empty object. When I printed this inside of the client.on function I've got the correct Vue instance with all of it's fields and methods. This really bothers me because I can access the Vue object but I cannot modify it's contents.

Answer 1

Maybe try this in the "mounted" lifecycle hook. Here's an example of something I use that's listening to a websocket. It should be similar implementation to your application
mounted() {
let connection = new WebSocket('wss://somesocket.net/ws')
connection.onmessage = (event) => {
console.log("Data received!")
console.log(event.data)
const data = JSON.parse(event.data)
this.ws_data = data
}
connection.onopen = (event) => {
console.log("Connected! Waiting for data...")
}
},

Answer 2

This is how I did it using vue-mqtt package.
export default {
data () {
return {
sensor: ''
}
},
mqtt: {
/** Read incoming messages from topic test*/
'test' (data) {
this.sensor = data
console.log(data)
}
},
created () {
},
async mounted () {
this.$mqtt = await this.$mqtt
this.$mqtt.publish('test', 'hello from vuemqtt yo !!!!')
this.$mqtt.subscribe('test')
}
}