(表題修正)nuxt+axiosで繰り返しデータを更新したい

Question

コンポーネント化したvue.js+axiosで定期的に取得したデータを更新したいのですが、動的に取得したデータがHTMLに反映されません。

何が原因かご教示願えませんでしょうか。

該当のソースコード

<!-- 説明に表示部分ソース追加(2021/3/3付) -->
<template>
  <section class="container">
    <v-app>
      <pre>flg1={{flg1}}</pre>
      <template v-for="(dt, i) in arrDt">
        <template v-if="name=='TEST1'">
          <gcmarker message="dt.aa" title="dt.bb" :left="l" :top="t" :key="i" />
        </template>
      </template>
      <hr>
      <pre>[{{now}}]</pre>
      <router-link to="/other">Go to other</router-link>
      
    </v-app>
  </section>
</template>


<script>
import gcmarker from './gcmarker.vue';
const axios = require('axios');

export default {
  components: { gcmarker },
  data:function(){
    console.log('-----');
    return {
      title:'Hello',
      message:'this is message',
      now:'wait...    ',
      flg1:'',
      arrDt:{},
    }
  },
  created:function(){
    setInterval(
      ()=>{
        console.log('++++');
        var d = new Date();
        this.now = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();  // <--これは毎回更新される

        axios.get('http://localhost:8080/api/getapi/')
        .then((response)=>{
          console.log('////'); //<-- 通る
          var d = new Date();
          this.$data.flg1=d.getSeconds();           //<--代入しているが画面上に反映されない
          this.$data.arrDt=response.Data;
          if(response.data.length>0){
            console.log('');
            console.log(response.data.length);    //<--件数は「2」で取れている
          }
          console.log('   ////');　　//<-- 通る
        });
      },3000
    );
  },
};
</script>

試したこと

https://teratail.com/questions/114629
上記のページを参考に、外部のdataに$が抜けていると思い、$を付けましたが
現象は解消されませんでした。
(flg1はフラグとして生成した変数ですが、更新確認のため一時的に秒を代入しています。ご了承ください)

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

@vue/cli 4.5.11
(vue.jsではなくnuxt環境でした。失礼しました)
@nuxt/cli v.14.12
node-v14.15.4-x64.msi

実行結果(2021/3/3付)

vueを明示的にインスタンス化したものを格納した変数とコンポーネント化したvueのthisの理解が浅いため、意図の不明なコードがあるかもしれません。ご容赦ください。

Comments

[neko_daisuki]

this.$data.flg1=d.getSeconds()　を
this.$data.flg1=d.getMilliseconds() に変更しても変わりませんか？

[motto_e]

表示部分がなくわかりづらかったです。すみません。
flg1には値が代入されているはずなのですが、空値で表示されます。
flg1への代入を、then()の外側にもってくると、代入された秒の値が表示される状況です。

thenの中にflg1を入れると、表示部分からはアクセスできないスコープになってしまうのかとも思っているのですが、その辺の仕組みがまだ調査中で。

Answer 1

解決いたしました。
以下の部分でCORS違反でエラーが発生していたのが原因でした。

axios.get('http://localhost:8080/api/getapi/') 

同じlocalhostでも発行元がlocalhost:3000、受付先がlocalhost:8080 でポート違いでCORS違反になっていました。

そのためRESTコントローラクラスに、@CrossOriginアノテーションを付与して解決いたしました。

//RESTコントローラ (Spring Boot)
@RestController
@CrossOrigin   // <--- ここに付与
@RequestMapping("/api/")
public class RestAPIController {

//中略

}

対応を参照したURLです
https://qiita.com/syukai/items/4e88749d1d62f1148e45
いろいろお手数おかけしてしまいました。

####補足
質問時に変数につけていた"$"は外しています。

 axios.get('http://localhost:8080/api/getapi/')
        .then((response)=>{
          console.log('////'); //<-- 通る
          var d = new Date();
          this.data.flg1=d.getSeconds();           //<--$は不要
          this.data.arrDt=response.Data;           //<--$は不要
          if(response.data.length>0){
            console.log('');
            console.log(response.data.length);    //<--件数は「2」で取れている
          }