Vue JS - Доступ к дочерним данным с помощью этого. $ Refs

Question

Я создаю RESTful Api управления проектом (MEVN стек). Когда я создаю новый проект, у меня есть много входных данных, которые разбиты на разные вкладки (работа с Bootstrap Vue ).

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

В настоящее время у меня есть следующий подход:

NewProject.vue

Каждый пустой массив представляет собой вкладку.

newProject: {
  general: []
  calculation: []
  generalChecklist: []
  orderChecklist: []
}

OrderChecklistProject.vue

data: () => ({
  checklist: [
    {
      label: 'Some descriptive label - 1',
      inputs: [{
          type: 'checkbox',
          value: false
        },
        {
          type: 'date',
          value: ''
        },
      ]
    },
    {
      label: 'Some descriptive label - 2',
      inputs: [{
          type: 'checkbox',
          value: false
        },
        {
          type: 'date',
          value: ''
        },
      ]
    },
    ....
})

NewProject.vue - метод addProject

async addProject() {
  this.project.orderChecklist = this.$refs.orderChecklistComponent._data.checklist
  ...
  // build project array
  await this.$store.dispatch('projectStoreModule/create', this.newProject)
  this.$router.push('/projects')
}

Кажется, все работает нормально, документы в моем mongoDB также верны, и на моем ShowProject.vue

он также отображается правильно

Но так как я все еще изучаю Vue и работаю со стеком MEVN, я не знаю, подходит ли мой подход или есть ли у него недостатки, если я делаю это так.

Буду признателен за любую помощь или намеки о том, что я делаю неправильно / что я могу сделать лучше!

Заранее спасибо!