Integration of Socket.IO with VUE Framework - vue.js

Question

Hello I am trying to implement socket.io with vue.js however I cannot access the emits in the different views.
After configuring main.js I can get emits on the APP, but I can't get them on HOME.
Is it possible to help with this situation.
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import * as io from "socket.io-client";
import VueSocketIO from "vue-socket.io";
Vue.use(
new VueSocketIO({
debug: true,
connection: io("http://localhost:3001"),
})
);
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
render: (h) => h(App),
}).$mount("#app");
Here I have the implementation of the first view, and here I have access to the socket.io emit!
<template>
<v-app id="inspire">
<v-app-bar app color="white" flat>
<v-container class="py-0 fill-height">
<v-avatar class="mr-10" color="grey darken-1" size="32"></v-avatar>
<v-btn v-for="link in links" :key="link" text>
{{ link }}
</v-btn>
<v-spacer></v-spacer>
<v-responsive max-width="260">
<v-switch
v-model="switchLogIn"
label="login"
color="success"
hide-details
></v-switch>
</v-responsive>
</v-container>
</v-app-bar>
<v-main class="grey lighten-3">
<v-container>
<v-row>
<v-col cols="2">
<v-sheet rounded="lg">
<v-list color="transparent">
<v-list-item v-for="n in 5" :key="n" link>
<v-list-item-content>
<v-list-item-title> List Item {{ n }} </v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-list-item link color="grey lighten-4">
<v-list-item-content>
<v-list-item-title to="/about">
{{ nextSip["Estado Processo"] }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-sheet>
</v-col>
<v-col>
<v-alert icon="mdi-database-outline" prominent text type="info">
FILA DE TRABALHO COM {{ workFlowSize }}.
</v-alert>
<v-sheet min-height="70vh" rounded="lg" v-if="switchLogIn">
<router-view></router-view>
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script>
export default {
data: () => ({
links: ["Dashboard"],
switchLogIn: false,
workFlow: "",
workFlowSize: 0,
nextSip: Object,
}),
sockets: {
connect: function () {
this.$swal("Conectado com Sucesso", "Servidor Localhost:3001", "success");
console.log("socket connected");
},
workFlowSize(data) {
this.workFlowSize = data;
},
nextSip: (data) => {
console.log(data);
},
},
watch: {
switchLogIn: function (value) {
if (value == true) {
console.log("Im LOGIN");
}
},
},
};
</script>
but not here
<template>
<div class="home">
<SipForm/>
</div>
</template>
<script>
import SipForm from "#/components/SipForm.vue";
export default {
name: "Home",
components: {
SipForm,
},
data: () => ({
workFlowSize: 0,
}),
sockets: {
connect: function () {
this.$swal("Conectado com Sucesso", "Servidor Localhost:3001", "success");
console.log("socket connected");
},
workFlowSize(data) {
this.workFlowSize = data;
},
nextSip: (data) => {
console.log(data);
},
},
};
</script>