inter component communication in nuxt js - vue-component

Question

I am trying to call a function of a component from another component.
In the called function there is a dispatch to store which works if call it from the same component but gives an error if the call is made from other components.
Same with the $emit and $on
Cannot read property 'dispatch' of undefined
Component from where the function is called
<template>
<div>
<button #click="doSubmit()">submit</button>
</div>
</template>
<script>
import empinfo from '../components/empinfo'
export default {
components: {
},
data() {
return {
infoEmp: {
}
}
},
methods: {
doSubmit() {
empinfo.methods.putEmpinfo()
console.log('this sendEmpinfo', empinfo.methods.putEmpinfo())
// this.$nuxt.$on('EMP_INFO', (data) => {
// this.infoEmp = data
// console.log('in data', data)
// })
console.log('infoEmp', this.infoEmp)
}
}
}
</script>
Here
The function called
<script>
export default {
data() {
return {
empInfo: {
lastName: "",
firstName: "",
middleIntial: "",
otherLastName: "",
address: "",
apartmentNo: "",
city: [],
}
}
},
computed: {
compEmpinfo() {
// console.log('emp inform', event)
// this.$store.dispatch('formdata/EMP_INFO', this.empInfo)
console.log("this is ", this)
const some = this.$store.dispatch("formdata/EMP_INFO", this.empInfo)
console.log("log sto", some)
return some
// return this.$nuxt.$emit('EMP_INFO', this.empInfo)
}
},
methods: {
putEmpinfo() {
// console.log('emp inform', event)
// this.$store.dispatch('formdata/EMP_INFO', this.empInfo)
//console.log("this is ", this)
try {
const some = this.$store.dispatch("formdata/EMP_INFO",
this.empInfo)
console.log("log some", some)
} catch (error) {
console.log("try clatch", error)
}
// return this.$nuxt.$emit('EMP_INFO', this.empInfo)
},
testcall() {
console.log("test call works")
},
sendEmpinfo() {
return this.empInfo
}
}
}
</script>