Почему изменение маршрута вручную нарушает автоматический routing в приложении Vue?

Question

[Wolfcrusher]

При изменении в строке браузера маршрута вручную приложение начинает "сбоить" - менять маршрут спонтанно в некоторые моменты, когда counter > 0. Само приложение работает зациклено с изменением нескольких аналогичных маршрутов после окончания обратного отсчета. Отсюда вопрос - как сделать так, чтобы при ручном изменении маршрута приложение начинало свою работу корректно, как бы с "чистого листа" соответствующего маршрута. Полагаю тут какая-то загвоздка в хуках, может mounted() не подходит, может надо использовать хуки для vue-router, но с другими у меня ситуация не лучше получилась.
Для остальных маршрутов код аналогичный:

export default {
  data() {
  	return { counter: 10 }
  },
  methods: {
	timer(counter) {
      let countdown = (counter)=> {
      	if (counter>0) {
          this.counter = counter;
          counter--;
      	  setTimeout((countdown.bind(null,counter)), 1000);
        } else (this.$router.push({ path: '/2'}));
      }
      countdown(counter);
    } 
  },
  mounted() {
    this.timer(this.counter);
  } 
}

Answer 1

[0xD34F]

Потому что роут поменялся, а таймаут остался. И когда вы находитесь уже на другом роуте, этот забытый таймаут внезапно срабатывает и... Ну, понятно.

Сохраняйте таймаут при установке и сбрасывайте его при уходе с роута:

this.timeout = setTimeout(...

beforeRouteLeave(to, from, next) {
  clearTimeout(this.timeout);
  next();
},

UPD. Небольшое демо.