Невозможно использовать ключевое слово "this" для доступа к данным в экземплярах Vuejs data / method / lifeCycle

Question

Я работаю над добавлением функции нумерации страниц на страницу со списком, но это не проблема. Проблема заключается в том, что каждый раз, когда я пытаюсь использовать ключевое слово this для получения значения свойства экземпляра данных, я получаю значение undefined подобно console.log("object=======>", this.currentPage); // undefined внутри метода getPageToShow () и disable: this.currentPage === 1 внутри данных Сам экземпляр, похоже, не возвращает ожидаемое значение. Но я могу получить доступ ко всем этим значениям свойств данных в шаблоне.

Я пытался использовать created и mounted экземпляр жизненного цикла, просто чтобы убедиться, что компонент не выполняет рендеринг до привязки данных, но все безрезультатно.

Вот мой код;

export default {
    name: "Pagination",
    data() {
        return {
            pageToShow: this.getPageToShow(),
            currentPage: null,
            disable: this.currentPage === 1
        };
    },
    mounted() {
        this.currentPage = this.$store.state.currentPage;
    },
    methods: {
        getPageToShow(num) {
            console.log("object=======>", this.currentPage, this.disable);
            this.$store.commit(Types.UPDATE_PAGETOSHOW, num);
            return this.$store.state.pageToShow;
        }
    }
};

Вот как я использую данные в своем шаблоне и работает нормально.

<template>
 <div>
  <button
    class="fl dib link dim black f5 b pa2 bg-white ba bw0"
    :style="disable && { cursor: 'not-allowed' }"
    title="Previous"
    :disabled="disable"
    tabindex="-1"
  >
    &larr; Previous
  </button>
 </div>
</template>

Я пытался console.log(this), из которых я могу видеть эти свойства внутри, но ключевое слово this, похоже, не получает их внутри экземпляров Vue. Я хочу, например, console.log("object=======>", this.currentPage, this.disable), чтобы вернуть действительное значение, а не // undefined, undefined. Спасибо