Rails5.2：vueで再描画させたい

Question

環境
ruby2.5.1
Rails5.2
vue2.5

フォロー機能があり、フォローしている人の投稿をマイページのタイムラインに表示しています。
フォローしている人が新たに投稿した場合、マイページのタイムラインを再描画したいのですが、うまくいきません。
下記、実装になります。

timeline.vue

<template>
    <div id="timeline">
      <div v-for="post in postList">
         {{ post.〇〇 }}
      </div>
    </div>
</template>

<script>
import axios from 'axios';

const token = document.getElementsByName('csrf-token')[0].getAttribute('content');
axios.defaults.headers.common['X-CSRF-Token'] = token;

export default {
  data: () => {
    return {
      post_list: []
    }
  },

  mounted: function () {
    axios.get(`/posts/timeline.json`)
      .then(res => {
          this.post_list = res.data.posts
       })
       .catch(error => {
          alert(error)
      });
  },

  computed: {
    postList() {
      return this.post_list
     }
  },
}
</script>

timeline.js

const app = new Vue({
  el: '#timeline-view',
  components: { Timeline }
})

$(function(){
  setInterval(function() {
    axios.get(`/posts/timeline.json`)
      .then(res => {
        app.$data.post_list = []
        app.$data.post_list.push(res.data.posts)
      })
      .catch(error => {
        alert(error)
      });
  }, 10000);

});

timeline.jsのsetIntervalで10秒ごとにajaxで投稿データを取得し、post_listにデータを格納しています。
dataの中身が変わるとDOMも再描画される認識だったのでしたが、違うのでしょうか？

下記、配列のデータの場合、ビューが更新されないという記事も参考にさせていただいたのですが、よくわからず。
https://cloudpack.media/41984

ご教示お願いいたします。

Answer 1

app.$data.post_list = []
app.$data.post_list.push(res.data.posts)

これだと 第1要素が配列の配列を作っていることになります。(ex: [[1,2,3]]みたいな)

app.$data.post_list = res.data.posts

だけでいいんじゃないですか？

またこの例だとTimelineコンポーネント自身もデータを取得し、外部から同じURLを叩いてデータを更新している構成になっています。
Timeline は props 経由で渡されたデータを表示するだけとし、常に外部から posts データを渡した方がよいと思います。