Как визуализировать форму после того, как данные установлены с помощью Mounting () в Vue

Question

Итак, у меня проблема с загрузкой формы с предварительно заполненными данными. Я вижу, что store.state установлено до отображения страницы, однако входные данные формы не отображаются с предварительно заполненными данными.

В настоящее время я использую метод mounted(), чтобы попытаться добиться этого, однако, похоже, он не работает.

Вот мой шаблон формы

<form @submit.prevent="editThisWorkflow">

    <div>
    <input type="text" v-model="workflowData.workflow">
      </div>
     <div>
     <div v-for="object in workflowData.statuses" :key="object.id">
     <input  type="text" v-model="object.status">
     </div>
     <div v-for="(status, index) in workflowData.newStatuses" :key="index">
      <input type="text" placeholder="Add Status" v-model="status.value">
       <button type="button" @click="deleteField(index)">X</button>
       </div>
       <button type="button"  @click="addField">
          New Status Field
      </button>
      </div>
      <div>
      <div>
     <button type="submit">Save</button>
    <router-link  to="/administrator/workflows">Cancel</router-link>
   </div>
  </div>

</form>

Вот сценарий

<script>
import { mapGetters, mapActions } from 'vuex'


export default {
    name: 'EditWorkflow',
    data() {
        return {
            workflowData: {
                id: '',
                workflow: '',
                statuses: '',
                newStatuses: []
            },
            workflowLoaded: false
        }
    },
    computed: {
    ...mapGetters(['workflow']),
  },
  methods: {
    ...mapActions(['editWorkflow']),
    editThisWorkflow() {
        this.editWorkflow({
           id: this.workflowData.id,
           workflow: this.workflowData.workflow,
           statuses: this.workflowData.statuses,
           newStatuses: this.workflowData.newStatuses
        }).then(() => {
            this.$router.push({ path: '/administrator/workflows' })
            this.$store.commit('removeDataFromWorkflow')
        })
    },
    addField() {
        this.workflowData.newStatuses.push({ value: ''});
    },
    deleteField(index) {
        this.workflowData.newStatuses.splice(index, 1);
    },
    removeData() {
        this.$store.commit('removeDataFromWorkflow')
    }
  },
  mounted() {
    this.workflowData.id = this.$store.state.workflow.id
    this.workflowData.workflow = this.$store.state.workflow.workflow
    this.workflowData.statuses = this.$store.state.workflow.statuses
  },
  created: function(){
    this.workflowLoaded  = true
    this.$store.dispatch('getWorkflow', this.$route.params.workflow);
    var self = this;
        setTimeout(() => {
          self.workflowLoaded = false;
      }, 3000);
  }
}
</script>

Как вы можете видеть здесь, я пытаюсь установить состояние моего объекта данных с помощью состояния хранилища, и мне интересно, возможно, есть ли лучший способ сделать это?

mounted() {
  this.workflowData.id = this.$store.state.workflow.id
  this.workflowData.workflow = this.$store.state.workflow.workflow
  this.workflowData.statuses = this.$store.state.workflow.statuses
},