Как правильно организовать код большой формы-калькулятора на vue.js?
Раздели свой компонент Cleaning.vue на Type.vue, Area.vue, Window.vue и т.п., в которых реализуй механику работы каждого элемента формы и его стилизацию; для них реализуешь работу через v-model:<template>
                    <div class="fieldItem">
                        <label for="cleaningType">Тип уборки</label>
                        <select id="cleaningType" :value="value" @input="$emit('input', $event.value)">
                          <option disabled value="">Выберите один из вариантов</option>
                          <option value="1" >Быстрая</option>
                          <option value="2" >Генеральная</option>
                          <option value="3">После ремонта</option>
                        </select>
                    </div>
</template>export default {
  props: {
    value: Number
}
}
 в App.vue оставь валидацию и отправку на сервер:<form class="calculatorForm">
        <Type v-model="type" />
        <Area v-model="area" />
        <Window v-model="windows" />
        ....
        <button @click.prevent="getPriceInfo" >Рассчитать</button>
    </form>
не знаком с vue. но код впринцепи понятен, попробуйте сделать так: все расчеты в одном файле, весь вывод в другом.
 по сути у вас будет 3 файла. общий(собирающий) 
так сказать "вид" который вставляет все необходимые данные.
 и отдельный файл логики. как там у вас все расяитывается. 
на каждую кнопку нет смысла создавать файл, ровно также как и нет смысла отрисовывать каждую кнопку в отделтном файле