firebaseのデータベースからaxiosを使ってリアルタイム取得がしたい

今回はvue,firebase,axiosを使ってチャット的なものを作ろうとしています。
firebaseのSDKを使わずaxiosの勉強としてやっています。

現状

Vue
1  created () {
2    axios.get('https://firestore.googleapis.com/v1/projects/*******/databases/(default)/documents/comments')
3      .then(response => {
4        this.contents = response.data.documents
5        //   console.log(response.data.documents)
6      })
7  },

このコードでデータベースから取得、表示はできていています。
しかしこれではリアルタイムで更新はされずページを再読み込みする必要があるので setInterval で毎秒取得しようと考えました。

Vue
1  created () {
2    setInterval(function () {
3      axios.get('https://firestore.googleapis.com/v1/projects/*******/databases/(default)/documents/comments')
4        .then(response => {
5          this.contents = response.data.documents
6          //   console.log(response.data.documents)
7          console.log(this.contents)
8        })
9    }, 1000)
10  },

これで取得とcontentsに配列が入っていることは確認できているのですが表示がされず、元からデーターベースに入っていた内容も表示されなくなってしまいました。
setIntervalはしっかり動いていてエラーなどは表示されていません。

表示するコードはこうなっています

HTML
1    <div v-for="content in contents" v-bind:key="content.name">
2        <div>名前;{{content.fields.name.stringValue}}</div>
3        <div>コメント;{{content.fields.text.stringValue}}</div>
4        <br>
5    </div>

勉強初めて数日なので「もっとこうすればいい！」などあればご教授のほどよろしくお願いします。