Chrome Extenstion with Vue Invoking nested methods - google-chrome-extension

Question

thanks to all in advanced.
I'm trying to build a simple Chrome extension with vue using this Boilerplate,
but I find it hard to communicate with the content.js file and popup.js file and passing data between them.
currently I'm trying to pass the total number of p tags that are in the current tab.
when I try to invoke a method inside the sendMessage function I'm getting an Error saying this.count is not a function. I'v figured out that probably the function is not firing because it's nested, but I cant figure out how can invoke the method.
Cheers to all
popup.js
<template>
<div>
<p>{{title}}</p>
<button v-on:click="getCount">click Here</button>
<p>{{counts}}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: "count board",
counts: ""
};
},
methods: {
getCount() {
chrome.tabs.query({ currentWindow: true, active: true }, tabs => {
chrome.tabs.sendMessage(tabs[0].id, "null", this.count);
});
}
},
count(res) {
console.log(res.count);
this.counts = res.count
}
};
</script>
Content.js
chrome.runtime.onMessage.addListener(function (req, sender, sendResponse) {
const para = document.querySelectorAll('p')
sendResponse({ count: para.length })
})
I'm trying to invoke this.count on every button click in popup.html and retrieving the total numbers of P tags