Nuxt.js storeからgettersで取得したデータがHTMLに反映できない

Question

前提

プログラミング初学者です。
Nuxt.js +firebaseで記事投稿システムを作っています。
記事投稿後の編集機能を実装中に行き詰まった箇所の質問になります。

実現したいこと

・storeからgettersで取得したオブジェクトデータをinputタグで初期値として表示し、文字編集後store側にdispatchしていきたい。

発生している問題・エラーメッセージ

　computedで取得したデータが上手くHTML側で表示ができない。

該当のソースコード

<template>
  <section class="container posts-page">
    <el-card style="flex: 1">
      <div class="clearfix">
        <el-input
          value="post.title"
          placeholder="タイトルを入力"
          v-model="formData.title"
        />
      </div>
      <div>
        <el-input
          placeholder="本文を入力……"
          type="textarea"
          rows="15"
          v-model="formData.body"
        />
      </div>
      <div class="text-right" style="margin-top: 16px">
        <el-button type="primary" @click="publishPost" round>
          <span class="el-icon-upload2" />
          <span>Publish</span>
        </el-button>
      </div>
    </el-card>
  </section>
</template>
<script>
export default {
  layout: "after-login",
  async asyncData({ store, route, error }) {
    const id = route.params;
    console.log(id);
    try {
      await store.dispatch("posts/getPost", {
        postId: id.postId,
        uid: id.uid,
      });
    } catch (e) {
      error({ statusCode: 404 });
    }
  },
  computed: {
    formData() {
      return this.$store.getters["posts/selectPost"];
    },

  
    uid() {
      return this.$store.getters.user.uid;
    },
    name() {
      return this.$store.getters.user.name;
    },
    photoURL() {
      return this.$store.getters.user.photoURL;
    },
  },
  methods: {
  
    publishPost() {
      this.$store.dispatch("posts/publishPost", {
        photoURL: this.photoURL,
        name: this.name,
        uid: this.uid,
        title: this.formData.title,
        body: this.formData.body,
      });
      this.title = "";
      this.body = "";
    },
  },
};
</script>

export const state = () => ({
 
  selectPost: [],
});

export const getters = {

  selectPost: (state) => {
    return state.selectPost;
  },
};

export const mutations = {
  setPost(state, data) {
    state.selectPost = data;
  },
};

export const actions = {
  
  async getPost({ commit }, payload) {
    try {
      console.log(payload.postId);
      const querySnapshot = await this.$fire.firestore
        .collection("posts")
        .where("postId", "==", payload.postId)
        .get();

      const selectPost = [];
      querySnapshot.forEach((doc) => {
        const data = doc.data();
        console.log(data);
        selectPost.push(data);
      });
      console.log(selectPost);
      commit("setPost", selectPost);
    } catch (error) {
      console.log(error);
    }
  },
  
  async publishPost({ dispatch }, payload) {
    const collection = this.$fire.firestore.collection("posts");
    const newId = collection.doc().id;

    try {
      await collection.doc(newId).set({
        postId: newId,
        photoURL: payload.photoURL,
        name: payload.name,
        uid: payload.uid,
        title: payload.title,
        body: payload.body,
        time: this.$fireModule.firestore.FieldValue.serverTimestamp(),
      });
      // console.log(uid);
      // console.log(title);
      // console.log(body);
      dispatch("getPosts");
    } catch (error) {
      // console.log(title);
      console.log(error); //eslint-disable-line
      console.log(payload); //eslint-disable-line
    }
  },
  

試したこと

getとsetを使用して取得と送信を行うと考えているのですが、実装が上手くいきませんでした。
titleとbodyをstore側でまとめてデータ取得していますが、1項目ずつ取得した方が上手くいくのか、現在の方法でも実装が可能か教えていただけると幸いです。
よろしくお願いします

Answer 1

posts/index.vueのstateへの格納方法を変更し、
edit.vue側で呼び出す際にv-modelを使用してinputで入力しようとすると、「do not mutate vuex store state outside mutation handlers」のエラーが発生したため、get()set()を使用し、actionからstateの値を変更する事で対応できました。
参考記事
https://designsupply-web.com/media/programming/6812/

//computed
selectPost: {
      get() {
        return Object.assign({}, this.$store.getters["posts/selectPost"]);
      },
      set(value) {
        this.$store.dispatch("posts/fetchPost", value);
      },
    },

export const state = () => ({
  posts: [],
  selectPost: {
    body: "",
    name: "",
    photoURL: "",
    postId: "",
    time: "",
    title: "",
    uid: "",
  },
});

//getters
 async getPost({ commit }, payload) {
    try {
      console.log(payload.postId);
      const querySnapshot = await this.$fire.firestore
        .collection("posts")
        .where("postId", "==", payload.postId)
        .get();

      const selectPost = [];
      querySnapshot.forEach((doc) => {
        const data = doc.data();
        console.log(data);
        commit("setPost", {
          body: data.body,
          name: data.name,
          photoURL: data.photoURL,
          postId: data.postId,
          time: data.time,
          title: data.title,
          uid: data.uid,
        });
      });
    } catch (error) {
      console.log(error);
    }
  },
//action
  async fetchMembers({ commit }, payload) {
    return commit("setPost", payload);
  },