Chrome Расширение с помощью Vue Вызов вложенных методов

Question

спасибо всем в продвинутом.

Я пытаюсь создать простое расширение Chrome с vue, используя этот Boilerplate , но мне трудно общаться с Файл content.js и файл popup.js и передача данных между ними.

В настоящее время я пытаюсь передать общее количество тегов p, находящихся на текущей вкладке. когда я пытаюсь вызвать метод внутри функции sendMessage, я получаю сообщение об ошибке this.count is not a function. Я понял, что, вероятно, функция не запускается, потому что она вложенная, но я не могу понять, как вызвать метод.

Приветствует всех

всплывающее окно. 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>

Содержание. js

chrome.runtime.onMessage.addListener(function (req, sender, sendResponse) {
    const para = document.querySelectorAll('p')
    sendResponse({ count: para.length })
})

Я пытаюсь вызвать this.count при каждом нажатии кнопки в popup.html и получить общее количество P тегов