例

簡単な例を用意しました。htmlとjsは以下の通りです。

test.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<div id="app">
		<button @click="counter">クリック！</button>
		{{ num }}
	</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="test.js"></script>
</body>
</html>

test.js

var app = new Vue({
	el: '#app',
	data:{
		num: 0
	},
	methods:{
		counter: function(){
			setInterval(function() {
				this.num += 1
			},1000)
		}
	}
})

HTMLを表示するとこんな感じになります。

ボタンをクリックすると、ボタンの横の「0」が1秒ごとに1，2，3・・・と増えていきます（実際はエラーが出ます）

何がいけないのか

counter関数内の"this"が原因です。

このthisは、vueインスタンスのthisではなく、setIntervalのthis(window？)を指してしまっています。

対策

setInterval()を呼び出す前に、var th = this;というように記述しましょう。

変更後のjsファイルは以下のようになります。

test.js

var app = new Vue({
	el: '#app',
	data:{
		num: 0
	},
	methods:{
		counter: function(){
			var th = this;
			setInterval(function() {
				th.num += 1
			},1000)
		}
	}
})

こうすることで、thはvueインスタンスのthisを格納することになるので、numが1ずつ足されます。