Как корректно использовать таймер в качестве метода Vue (проблема при обращении к this)?

Question

[Wolfcrusher]

Уважаемые знатоки, ситуация следующая: написал код в Vue для таймера, который должен выводить на экране обратный отсчет и при нуле менять маршрут.
Проблема в том, что мое понимание использования this весьма ограничено, и я не могу понять как из функции счетчика ( f ) реактивно менять внешний counter метода timer. К тому же не могу понять как из функции f заставить работать $router. Возможно стоит использовать другой подход?
Заранее спасибо за помощь.

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

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

Answer 1

[alex]

export default {
  data() {
    return {
      counter: 10
    }
  },
  methods: {
    countDown() {
      if (this.counter) {
        return setTimeout(() => {
          --this.counter
          this.countDown()
        }, 1000)
      }

      this.$router.push({ path: '/2'})
    }
  },
  mounted() {
    this.countDown();
  }
}

Answer 2

[Алексей Ярков]

Перепишите с использованием стрелочной функции, а не function, и все будет ОК