Почему кнопки BottomButton в Telegram Mini App вызывают одинаковые события несколько раз?

Привет! Проблема с дублированием событий на кнопках в Telegram Mini App может быть связана с тем, как вы настроили обработчики событий в вашем приложении на Nuxt. Вот несколько рекомендаций, которые могут помочь устранить эту проблему:

1. **Проверьте регистрацию обработчиков событий**: Убедитесь, что вы не регистрируете обработчики событий несколько раз. Если вы создаете новые экземпляры компонентов или страниц без удаления предыдущих обработчиков, это может привести к накоплению событий.

2. **Используйте `v-once` или `v-if`**: Если вы создаете компоненты динамически, вы можете использовать директиву `v-if`, чтобы гарантировать, что компонент и его обработчики будут созданы и зарегистрированы только один раз.

3. **Очистка обработчиков в `beforeDestroy`**: В зависимости от поведения вашего приложения, вы можете удалить существующие обработчики событий в хуке жизненного цикла `beforeDestroy` или `beforeUnmount`, чтобы избежать дублирования при переходе между страницами.

4. **Используйте `@click.once`**: Если вы используете Vue.js, рассмотрите возможность использования модификатора `.once` для события клика, что гарантирует, что обработчик будет вызван только один раз при первом нажатии:

   ```vue
   <button @click.once="yourMethod">Нажми меня</button>
   ```

5. **Добавление логирования**: Добавьте логи внутри обработчиков событий, чтобы лучше понять, когда они вызываются. Это поможет вам отследить, вызываются ли обработчики несколько раз и в каких условиях.

6. **Изучите документацию**: Убедитесь, что вы ознакомлены с последними обновлениями документации Telegram Mini Apps, так как возможны изменения или новые рекомендации по обработке событий.

Если проблема сохраняется, дополнительная информация о вашем коде или структуре приложения могла бы быть полезной для более детального анализа.

Решил.  Если кому актуально будет: 
 
 
// Можно в onUnmounted() добавить сброс с вашим коллбэком.
window.Telegram.WebApp.MainButton.offClick(/*same_callback*/)
 
 
 
// Как вариант можно создать массивы состояний под кнопки и чистить их по нужде
//....
const stateMainButton = useState<(() => void)[]>('mainButtonAction', () => []);
const stateSecondaryButton = useState<(() => void)[]>('secondaryButtonAction', () => []);

stateMainButton.value.forEach((handler) => $tg.MainButton.offClick(handler));
stateSecondaryButton.value.forEach((handler) => $tg.SecondaryButton.offClick(handler));

stateMainButton.value = [];
stateSecondaryButton.value = [];
//...