Vue.js でdata の値が反映されない

Question

前提・実現したいこと

Vue.jsにて「あるボタンを押すと、別のボタンの活性非活性を変更する」
という処理を書いています。
ボタンにv-bind:disabled="isPush"をつけて、@clickにてmethodsの関数を呼び、
関数内で「isPush」の真偽値を切り替えているのですが、ボタンの活性状態が変化しません。

発生している問題・エラーメッセージ

chromeのdevツールなどで確認したところ、どうやらdata で宣言している値が変更されていない様です。
console.logでは、変更された値が出力されるのですが、Vue devtools では値が変更されていません。

構成としては、初期読み込み用のmain.js ファイルからindex.html にマウントし、
大枠となるコンポーネントと、自作のナビゲーションコンポーネントを画面構成しています。

様々な記事をあさり、以下の対応をしてみましたがそれでも値が変わりません。

• vue-router の設定（watch されていない可能性を考えて対処）
• $set メソッドの使用（そもそもコンポーネント内でthis.$set を呼ぶと「not a function」エラーとなる）
• $forceUpdate()の使用(上に同じくエラーとなる)

コンポーネント内でthisをconsole.log出力すると、記述した変数や関数などのobject ができているだけで、
VueComponent のオブジェクトになっていない気もします（data ではなくaというキーしかなかったので…）

以下、試行錯誤してぐちゃぐちゃだったので、ある程度編集したサンプルコードです。
必要な箇所以外は、所々省略してます。

webpack.config.js のentryに設定している 「main.js」

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

// parent
import TopPanel from './TopPanel.vue'

// childrens
import InnerPanel from './component/InnerPanel.vue'
…

Vue.use(BootstrapVue)
Vue.use(VueRouter)
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {'…'}
});

const router = new VueRouter({
  routes: [
    { path: '/', component: TopPanel, 
      children: [
          { path: '/inner', component: InnerPanel },
      ]
    },
  ],
});


const app = new Vue({
  el: '#app',
  name: 'app',
  store,
  router,
  components: {
    TopPanel
  },
  template: '<router-view></router-view>'
})

「TopPanel.vue」
このvueでボタンの活性非活性を試行してみるとdisabledは変わらず、vue devtoolsでも値が変わりませんでした。

<template>
  <div id='top-panel' class="content-ground p-0 m-0">
    <div class="content-base d-flex p-1 border border-dark">
      <ul class="d-inline">
        <li><button class="btn btn-dark" v-on:click="pushedBtn(1)" :disabled="isPush1">button 1</button></li>
        <li><button class="btn btn-dark" v-on:click="pushedBtn(2)" :disabled="isPush2">button 2</button></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'top-panel',
  data: () => {
    return {
      isPush1: false,
      isPush2: false,
    }
  },
  methods: {
    pushedBtn: (s) => {
      if(s === 1){
        console.log(1 + ' disabled');
        this.isPush1 = true;
        this.isPush2 = false;
      } else if ( s === 2) {
        console.log(2 + ' disabled');
        this.isPush2 = true;
        this.isPush1 = false;
      }
      console.log(this);
    }
  }
}
</script>

やりたい事はシンプルなのですが、ここまでハマると思わなかったため、投稿させていただきました。
不足情報あると思いますので、解答に必要そうな事はお聞きください。
よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

Vue 2.9.6
vue-router, vuex, webpack使用
bootstrap, bootstrap-vue も使用

Comments

[jerome.dupuis]

コードのサンプルを追加お願いします。

Answer 1

dataの定義を下記のようにしてみてください。

 data () {
    return {
      isPush1: false,
      isPush2: false
    }
  },

Comments

[ShinoTatwu]

data 定義を頂いた内容に修正してみました。
反応は変わらず、ボタンの活性非活性は変わりませんでした。

同じく、console.logで出力しているthisの値は変更されていますが、
vue devtoolsで値を確認すると変化してない状態です。

Answer 2

解消しました

頂いたコメントもヒントとなりましたが、qiita記事の方でもコメント頂けたのでご報告します。

アロー関数、ダメ、絶対

vueコンポーネント内で所々アロー関数funcA: () => {...を使用していたため、
定義の向き先がコンポーネント自身に行っていないという状態でした。
アロー関数をやめてコンポーネントの定義として書き直したところリアクティブにボタンの活性状態が変わる様になりました。
funcA: function () {...
data () {...

調査にご助力頂いた方、コメント頂いたみなさまありがとうございました！！