Как правильно организовать код большой формы-калькулятора на vue.js?

<template>
  <div id="app">
    <h1>Калькулятор клининговых услуг</h1>

    <form class="calculatorForm">
        

        <Cleaning  v-bind:item="cleaning" @input="updateCleaning(item)" ></Cleaning>

        <button @click.prevent="getPriceInfo" >Рассчитать</button>
    </form>


  </div>
</template>

<script>

import Vue from 'vue'

import axios from 'axios'

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

import { required, minLength, between, numeric } from 'vuelidate/lib/validators'
import { helpers } from 'vuelidate/lib/validators'

const mustBeCool = (value) => !helpers.req(value) || value.indexOf('cool') >= 0



import Carpet from './components/Carpet.vue'
import Cleaning from './components/Cleaning.vue'

axios.defaults.baseURL = 'https://site.ru/calculator/php'

export default {
    name: 'app',
    data () {
      return {

        services: ["cleaning","windows", "carpets","furniture"],
        cleaning: {type: 2, area: null, showAbout: false, price: null, isActive: false},
        windows: {isClassic:true, oneFoldCount: 0, twoFoldCount: 0, threeFoldCount: 0, area: null, isActive: false}, 
        carpets: {items:[{type: 1, area: null}], isActive: false},

        endpoint: '/index.php'
      }
    },

    validations: {
        cleaning: {    
            area:{
                required
            }
        },

        windows: {
            oneFoldCount:{ 
                numeric 
            },
            twoFoldCount:{ 
                numeric 
            },
            threeFoldCount:{ 
                numeric }
        }
    },

    components: {Cleaning,Carpet},

    methods: {

        getPriceInfo: function(event) {
            
            // Здесь будет код отправки данных для расчёта на сервер и получения стоимости услуг
        },

        updateCleaning: function(item) {
            
            this.cleaning = item;
        },

        updateCarpet: function(item, index) {
            
            this.carpets.items[index] = item;
        },

        addCarpet: function() {
            
            this.carpets.items.push({type: 1, area: null});
        }
    }
}
</script>

<template>

        <div class="serviceBlock" v-bind:class="{ active: isActive }" >
            <div class="serviceSwitcher">
                <label class="serviceName" for="serviceCleaning">Уборка
                    <input type="checkbox" id="serviceCleaning" value="cleaning" @change="isActive = !isActive" ><span class="checkmark"></span>
                </label>
            </div>
            <div class="serviceContent" v-if="isActive">
                <div class="serviceFields" >
                    
                    <div class="fieldItem">
                        <label for="cleaningType">Тип уборки</label>
                        <select id="cleaningType" v-model="type">
                          <option disabled value="">Выберите один из вариантов</option>
                          <option value="1" >Быстрая</option>
                          <option value="2" >Генеральная</option>
                          <option value="3">После ремонта</option>
                        </select>
                    </div>

                    <div class="fieldItem">
                        <label for="cleaningArea">Площадь помещения (кв. м.)</label>
                        <input type="number" id="cleaningArea" min="1" v-model="area" v-on:input="filterArea">
                    </div>

                </div>

                <div class="servicePrice">
                        <div class="title">Стоимость уборки:</div>
                        <div class="value" v-if="price !== null" ><span class="price"></span><span class="currency">₽</span></div>
                        <div class="serviceErrors">
                            <div class="error" v-if="!$v.area.required">Введите площадь помещения, чтобы узнать стоимость уборки</div>
                        </div>
                </div>

                <div class="serviceDescription">
                    <a class="aboutLink" @click="showAbout = !showAbout" >Что входит в стоимость?</a>
                    <div class="aboutContent" v-if="showAbout" >Описание услуги</div>
                </div>
            </div>
        </div>

</template>

<script>


import Vue from 'vue'

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

import { required} from 'vuelidate/lib/validators'



export default {

    name: 'Cleaning',

    props:['item'],

    data () {
            return {
                type: this.item.type, 
                area: this.item.area, 
                showAbout: this.item.showAbout, 
                price: this.item.price, 
                isActive: this.item.isActive
            }
    },

    updated() 
    {
        $this.$emit('updated', this.data());
    },

    methods: {
        
        validateArea: function()
        {
            // Натуральное число
            const templateArea = /^(?:[1-9]\d{0,4})$/;

            if(templateArea.test(this.area))
            {
                return true;
            }

            return false;
            
        },

        filterArea: function(event) {
            //Целое число или пустое значение
            const templateArea = /^(?:[1-9]\d{0,4}|)$/;
            if(templateArea.test(this.area))
            {
                this.previousArea = this.area;
            }
            else
            {
                this.area = this.previousArea;            
            }
        },
    }
}
</script>