Vue.js × Laravel 定期的にDBから取得したデータを元にv-ifで表示非表示を切り替えたい

Question

前提・実現したいこと

Vue.jsとLaravelでSPAを開発しており、簡易的な通知機能を実装をしています。
setIntervalで定期的にデータベースに接続し、
その返り値をもとにヘッダー部分のバッジの表示非表示を切り替えるという仕様です。※添付画像の赤いバッジです。

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

データベースから定期的に取得したデータをもとにvueファイル側でisPushedのtrue・falseの値を更新し、
バッジの表示非表示を切り替えたいと考えており、
現状、isPushedの値の更新は行えているのですが、バッジの表示非表示が切り替わらす悩んでおります。
解決策がありましたら、ご教示いただけると嬉しいです。

※Console画面のスクショを添付させていただきます。
関係ないデータも含まれていますが、isPushedの値は変更されているようです。

該当のソースコード

[header.vue]
<template>
  <header>
    <v-btn icon>
      <v-icon>mdi-magnify</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon @click="logout">mdi-logout</v-icon>
    </v-btn>
    <router-link :to="{ name: 'hogehoge'}">
      <v-btn icon>
        <v-icon class="push_icon">mdi-bell-outline</v-icon>
      </v-btn>
      <span v-if="isPushed" class="push_circle"></span>
    </router-link>
  </header>
</template>
<script>
export default {
  data() {
    return {
      count:Number,
      isPushed:false,
    };
  },
  created(){
    this.push();
  },
  mounted(){
    this.repush();
  },
  methods: {
    logout: function() {
      axios
        .post("logout")
        .then(res => {
          console.log(res);
          location.href = "/";
        })
        .catch(err => console.log(err));
    },
  push: function() {
      axios
        .get("api/user/header/", {
        
        })
        .then(res => {

          this.count = res.data.notice;

          if (res.data.notice == 0){
              this.isPushed = false;
          } else {
              this.isPushed = true; 
            }
        })
        .catch(err => console.log(err));
    }, 
  repush: function() {
    setInterval(function() {
        axios.get("api/user/header/push/aaa")
        .then(res => {
            this.count = res.data.notice;
            if (res.data.notice == 0){
                this.isPushed = false;
                console.log(this.isPushed);
            } else {
                this.isPushed = true;
                console.log(this.isPushed);
            }
        })
        .catch( error => console.log(error));
    }, 3000);
  }
    
  }
};
</script>
<style scoped>
.push_icon{
  position: relative;
}
.push_circle{
  border-radius: 50%;
  color:#222;
  height: 15px;
  width: 15px;
  background-color: #b22222;
  position:absolute;
  right: 20px;
  bottom:10px;
}
</style>

試したこと

①v-showを使用してみる
②watchでisPushedの変更を監視し、表示の切り替えを行えないか。
→どちらも解決には繋がりませんでした。

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

基本的な知識不足かと思いますが、解決策がありましたら教えていただきたいです。
よろしくお願いいたします。

Answer 1

単純にスコープの問題ではありませんか？
コンソールでthisを出してみるとわかると思いますがrepush()で代入してる先はWindowオブジェクトになっていると思います。
vueデベロッパーツールなどで直接インスタンスのdataが更新されているか確認する癖をつけるとよいかもしれません。

  repush: function() {
    setInterval(() => {
      // 中略
    }, 3000);
  }

参考：アロー関数と関数の違いとthisの評価のされ方 - Qiita

Comments

[shi_23]

回答いただき、ありがとうございます。
Vueデベロッパーツールで確認したところ、dataの更新がされておりませんでした。
また、repush()で代入しているのはvueインスタンスではなく、
Windowオブジェクトとのこともコンソールで確認できました。

vueデベロッパーツール癖をつけるように心がけます。ご回答ありがとうございました。

重ねての質問となり申し訳ありませんが、
添付いただいたQiitaの記事や下記teratailの質問を参考に通常のfunctionに書き換えたり、
thisのbindや退避（let self = this; ）などを試してみたのですが、
いまだに解決できておりません。

https://teratail.com/questions/103176

追加でアドバイスがございましたら、ご教示いただければと思います。

[nt4c]

回答に示したようにsetIntervalの第一引数を関数からアロー関数へ変えてみましたか？

[shi_23]

大変申し訳ありません。
回答いただいたように変更したら、解決しました！
ありがとうございました。