Проблема с отправкой данных формы из Telegram WebApp с использованием Vue.js и FastAPI

я разрабатываю Mini-app с обратной связью на базе Telegram бота. Бекенд написан на FastAPI, фронтенд на Vue.js. Данные с формы успешно отправляются через обычный браузер, но когда я использую WebApp в Telegram, данные формы приходят пустыми.

Вот как я получаю данные в FastAPI:

@router.post("/submitform")
async def handle_form(request: Request):
    try:
        form_data = await request.json()
        form_input = FormInput(**form_data)
        print(form_input.name, form_input.email, form_input.message)
        return {"message": "Data received"}
    except Exception as e:
        print('2')
        logger.error(f"Ошибка при обработке формы: {e}")
        raise HTTPException(status_code=400, detail="Ошибка при обработке данных")

И вот моя форма на Vue:

<template>
  <div class="ufive-feedback">
    <section id="feedback">
      <h1>Форма обратной связи</h1>
      <form @submit.prevent="submitForm">
        <div class="field name-box" :class="{'focused': isNameFocused}">
          <input type="text" id="name" placeholder="Как Вас зовут?" v-model="name" @focus="isNameFocused = true" @blur="isNameFocused = false" />
          <label for="name">Имя</label>
        </div>
        <div class="field email-box" :class="{'focused': isEmailFocused}">
          <input type="text" id="email" placeholder="Ваш e-mail адрес" v-model="email" @focus="isEmailFocused = true" @blur="isEmailFocused = false" />
          <label for="email">E-mail</label>
        </div>
        <div class="field msg-box" :class="{'focused': isMsgFocused}">
          <textarea id="msg" rows="4" placeholder="Излагайте ваш вопрос четко и подробно" v-model="message" @focus="isMsgFocused = true" @blur="isMsgFocused = false" ></textarea>
          <label for="msg">Текст</label>
        </div>
        <input class="button" type="submit" value="Отправить"/>
      </form>
    </section>
  </div>
</template>

Обработка отправки формы на JavaScript выглядит так:

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      message: '',
      isNameFocused: false,
      isEmailFocused: false,
      isMsgFocused: false
    };
  },
  methods: {
    async submitForm() {
      const formData = {
        name: this.name,
        email: this.email,
        message: this.message,
      };
      try {
        const response = await fetch('https://127.0.0.1:3000/submitform', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(formData),
        });
        
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        
        const data = await response.json();
        console.log(data);
        alert('Спасибо за ваше сообщение!');
      } catch (error) {
        alert(error);
      }
    }
  }
}
</script>

Я перепробовал все методы и даже привлек коллег к решению этой задачи, но проблема остаётся. Как мне отправить данные из формы, чтобы они корректно обрабатывались на сервере при использовании Telegram WebApp?