store.jsでfetchしたデータをstateに格納したい

Question

前提・実現したいこと

ブログサイトを作成しており、あらまかじめ用意したデータを使って記事一覧を表示させようとしました。
store.jsでfetchしたデータをstateに格納し、他のvueコンポーネントからアクセスできるようにしたいです。

発生している問題

fetchでjsonデータを取得することはできているのですが、stateに格納ができず困っています

該当のソースコード

記事リストのテンプレート（一旦記事のタイトルだけでも表示したい・・・）
<template>
  <div id="articleList">
    <ul>
      <li v-for="(article,key) in articles" :key="key">
        {{ article.title }}
　　　　</li> 
    </ul>
  </div>
</template>
<script>
export default {
  name:'ArticleList',
  data(){
    return{
      articles:[]
    }
  },
  created(){
    this.$store.dispatch('getArticles')
    console.log(this.$store.state.articles)
　　//consoleには[__ob__: Observer]が表示されます
  }
}
</script>

store.js
Vue.use(Vuex)
const store = new Vuex.Store({
  state:{
    articles: [],
  },
  mutations: {
    setArticles() {
      fetch('http://localhost:3000/articles')
      .then( res => res.json() )
        .then(res => this.state.articles=res)
　　　　　//resには正しいデータが入っているのでfetch自体はうまくいっている
　　　　　//ここでデータを格納してコンポーネントからアクセスできるようにしたい
    }
  },
  actions: {
    getArticles() {
      this.commit('setArticles')
    },
     
  }
})
export default store;

試したこと

リアクティブの探求
こちらのドキュメントのようなことが原因かと思い色々な記事やサイトをみてみたのですが、自分の場合はどこをどのように試したら良いのか分からず、そもそもこれが原因なのかも分からず迷走中です。

データを取得するライフサイクルのタイミングをmountedにすることはやってみました。

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

"json-server": "^0.16.3"
"vuex": "^3.6.0"
"vue": "^2.6.11",

こういった場所に投稿するのは初めてなので至らない点などあるかと思いますが、何卒よろしくお願い致します。

Answer 1

Vue.jsでビューの変更がされないときに疑うこと+主な解決策方法
こちらの記事を参考にしました。
store.jsでstateにデータを入れる際、下記のように代入していましたが、
push()で挿入するように変更しました。

    setArticles() {
      fetch('http://localhost:3000/articles')
      .then( res => res.json() )
       .then(res => this.state.articles = res)
    },

↓

    setArticles() {
      fetch('http://localhost:3000/articles')
      .then( res => res.json() )
       .then(res => this.state.articles.push(res))
    },