Vueを使用してタイマー機能を実装する

<スクリプト>  
//タイマーは非同期で実行されます function hello(){  
アラート("こんにちは");  
}  
//メソッド名を使用してメソッドを実行します var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//文字列実行メソッドを使用する window.clearTimeout(t1);//タイマーを削除する</script>

//リアルタイム更新時間の単位はミリ秒です setInterval('refreshQuery()',8000);   
/* クエリを更新 */  
関数refreshQuery(){  
   $("#mainTable").datagrid('reload',null);  
}

<div class="父">
  <ul>
   <li>{{1} }:</span></li>
   <li>{{2} }:</span></li>
   <li>{{3}}</li>
  </ul>
  <el-button type="primary" @click="startHandler">開始</el-button>
  <el-button type="primary" @click="endHandler">一時停止</el-button>
</div>

<スクリプト>
エクスポートデフォルト{
  名前: 'HelloWorld',
  データ（）{
   戻る {
  フラグ: null、
  1 : '00', // 時間 2 : '00', // 分 3 : '00', // 秒 abc : 0, // 秒数 cde : 0, // 分数 efg : 0, // 時間数 }
  },
  小道具: {
    メッセージ: 文字列
  },
  マウント() {
   
  },
  方法:{
  // タイミングを開始する startHandler(){
  this.flag = setInterval(()=>{
   if(this.three === 60 || this.three === '60'){
    this.three = '00';
    this.abc = 0;
    if(this.two === 60 || this.two === '60'){
     this.two = '00';
     this.cde = 0;
     if(this.efg+1 <= 9){
      this.efg++;
      this.one = '0' + this.efg;
     }それ以外{
      this.efg++;
      this.one = this.efg;
     }
    }それ以外{
     if(this.cde+1 <= 9){
      this.cde++;
      this.two = '0' + this.cde;
     }それ以外{
      this.cde++;
      this.two = this.cde;
     }
    }
   }それ以外{
    もし(this.abc+1 <= 9){
     this.abc++;
     this.three = '0' + this.abc;
    }それ以外{
     this.abc++;
     this.three=this.abc;
    }
   }
   
  },100)
 },
 // 一時停止タイミング endHandler(){
  this.flag = clearInterval(this.flag)
 }
  }
}
</スクリプト>