Задача live coding: разработать калькулятор облачных расходов на Vue 3 с TypeScript. Загрузка тарифов из API, выбор сервиса (compute/storage), выбор тарифа, периода (hourly/daily), количества, расчёт итоговой стоимости.

Разделите калькулятор на загрузку и проверку тарифов, состояние выбора и computed-расчёт; цену вычисляйте по явно согласованным единицам.

Минимальная модель расчёта во Vue 3, предполагающая цены в копейках за одну единицу сервиса за час или сутки:

import { computed, ref } from 'vue';
type Service = 'compute' | 'storage';
type Period = 'hourly' | 'daily';
type Plan = { id: string; service: Service; hourly: number; daily: number };
const plans = ref<Plan[]>([]);
const service = ref<Service>('compute');
const planId = ref('');
const period = ref<Period>('hourly');
const quantity = ref(1);
const options = computed(() => plans.value.filter(p => p.service === service.value));
const selected = computed(() => options.value.find(p => p.id === planId.value));
const total = computed(() => {
  if (!selected.value || !Number.isInteger(quantity.value) || quantity.value < 1) return null;
  return selected.value[period.value] * quantity.value;
});

Тарифы загружают отдельным API-слоем с loading/error и runtime-валидацией. В шаблоне связывают select/input через v-model; при несовместимом planId расчёт скрывается до нового выбора. Это ядро, а endpoint, валюта, длительность и правила округления должны быть согласованы с реальным API.