NuxtでStoreを用いたフォーム実装方法ではまってます。

いつもお世話になっております。

Nuxtにてstoreを利用した際のフォーム入力挙動について質問です。

以下のデータをサーバーから取得し、そのデータを編集したいです。

{
    "id": "a233170f-119a-4589-9c10-88fc1a72b332",
    "title": "首相、来秋の総裁選出馬明言せず",
    "content": "菅義偉首相は27日放送のBSテレ東番組で、来年秋の自民党総裁選に立候補するかどうかを問われ、明言を避けた。「一日一日、着実に仕事をしていくことに尽きる」と語った。衆院解散・総選挙についても「約束した仕事は、きちんとやり遂げたい」と述べ、具体的な時期には言及しなかった。\r\n\r\n【動画】首相、飲食店時間短縮へ罰則検討\r\n\r\n　新型コロナウイルス感染症が急拡大する中、自身の年末年始の過ごし方について「危機管理の責任者だった官房長官時代の習癖がなかなか取れない。首相になっても、何か仕事をしていた方が落ち着く」と話した。\r\n\r\n　延期している中国の習近平国家主席の国賓来日に関しては「現時点で日程調整する状況ではない」とした。"
}

行いたい処理の流れ

サーバーから上記のデータを取得。
1で取得したデータをStoreのstateに保存。
2でStoreのstateに保存したデータをtemplate側で表示&編集。
3の挙動を v-model のようにリアルタイムでStoreのstateに反映。

ハマってる点

・上記「行いたい処理の流れ」における3,4で、inputで入力したデータをmutationsを介して編集することができません。
・v-modelで直接stateを編集することはできるようですが、当然mutationsを介して変更するようにとエラーがでます。

課題(と個人的に捉えている点)

・受け取ったデータがオブジェクト型なので、それに合わせた記述方法。
・以下のソースコードにおいて、stote/blogs.jsのnutationsのupdatePost()で受け取ったフォームのデータをどのようにstate.postに追加すれば良いか。

参考にした記事

・https://vuex.vuejs.org/guide/forms.html

ソースコード(pages側の方は３パターン記述します)

javascript
1/*  store/blogs.js  */
2
3export const state = () => ( {
4
5  post: "",
6
7} )
8
9
10export const getters = {
11
12  post: ( state ) => state.post,
13
14}
15
16
17export const mutations = {
18
19  setPost( state, {post} ){
20    state.post = post
21  },
22
23  updatePost( state, e ){
24    console.log( e );
25    state.post = post
26  },
27
28}
29
30
31export const actions = {
32
33  async fetchPost( {commit} ){
34
35    const post = await this.$axios.$get( `/api/v1/blog/a233170f-119a-4589-9c10-88fc1a72b332` )
36
37    commit( 'setPost', {post} )
38
39  },
40
41}

html
1/*  pages/index.vue - パターン１  */
2
3<template>
4  <div class="container">
5
6    <input v-model="post.title">
7
8    <hr>
9
10    {{ post.title }}
11
12  </div>
13</template>
14
15<script>
16export default {
17
18  async asyncData( {store, error} ){
19    try {
20      await store.dispatch( 'blogs/fetchPost' )
21    } catch(e) {
22      error( {statusCode: 404} )
23    }
24  },
25
26  computed: {
27
28    post: {
29      title: {
30
31        get(){
32          return this.$store.getters['blogs/post']
33        },
34        set( value ){
35          this.$store.commit( 'blogs/updatePost', value )
36        }
37
38      }
39    },
40
41  },
42
43}

html
1/*  pages/index.vue - パターン2 (computed:postの部分が１と異なります)  */
2
3<template>
4  <div class="container">
5
6    <input v-model="post.title">
7
8    <hr>
9
10    {{ post.title }}
11
12  </div>
13</template>
14
15<script>
16export default {
17
18  async asyncData( {store, error} ){
19    try {
20      await store.dispatch( 'blogs/fetchPost' )
21    } catch(e) {
22      error( {statusCode: 404} )
23    }
24  },
25
26  computed: {
27
28    post: {
29
30      get(){
31        return this.$store.getters['blogs/post']
32      },
33      set( value ){
34        this.$store.commit( 'blogs/updatePost', value )
35      }
36
37    },
38
39  },
40
41}

html
1/*  pages/index.vue - パターン3  */
2
3<template>
4  <div class="container">
5
6    <input :value="post.title" name="title" @input="updatePost">
7
8    <hr>
9
10    {{ post.title }}
11
12  </div>
13</template>
14
15<script>
16import { mapGetters } from 'vuex'
17
18export default {
19
20  async asyncData( {store, error} ){
21    try {
22      await store.dispatch( 'blogs/fetchPost' )
23    } catch(e) {
24      error( {statusCode: 404} )
25    }
26  },
27
28  computed: {
29    ...mapGetters( 'blogs', [
30      'post',
31    ] ),
32  },
33
34  methods: {
35    updatePost( e ){
36      this.$store.commit( 'blogs/updatePost', e )
37    },
38  },
39
40}
41</script>