Vue子組件中的setInterval定時器無法停止

1.我在子組件中定義了一個canvas動畫，當我顯示這個子組件的時候會利用setInterval來呈現(xiàn)出動畫效果，可以我發(fā)現(xiàn)用clearInterval無法停止動畫，請問是什么原因呢？
2.已經(jīng)嘗試了created，updated，mounted，beforeDestroy時候調(diào)用setInterval，發(fā)現(xiàn)都不行,
嘗試在組件中加按鈕添加click事件來調(diào)用setInterval發(fā)現(xiàn)無法觸發(fā)click事件？
剛接觸Vue.js，如果問題問的比較sb,輕噴。
最后，提前感謝大家！

//子組件
<template>
  <div><canvas width="400" height="400" ref="drawing"></canvas></div>
</template>

<script>

    export default {
        mounted(){
            //這里無法停止
            var interval=setInterval(this.drawing,200);
            if(this.width==290){
            //這里不會打印出over,我用v-if隱藏了這個組件后會一直報錯， var context=this.$refs.drawing.getContext("2d")這里一直報錯，這說明clearInterval一直沒起作用
              console.log("over");
              clearInterval(interval);
            }
        },

        name: "canvas-animation",
        data(){
          return {width:100}
        },
        methods:{
         drawing() {
           var context=this.$refs.drawing.getContext("2d");
           context.fillStyle="#409eff";
           context.fillRect(10,10,this.width,this.width);
           this.width=this.width+10;
         }


        }
    }
</script>

<style scoped>

</style>