The setInterval timer in the Vue subcomponent cannot be stopped

1. I have defined a canvas animation in the sub-component. When I display this sub-component, I will use setInterval to show the animation effect, but I can find that I can not stop the animation with clearInterval. What is the reason?
2. When you have tried created,updated,mounted,beforeDestroy, you can"t even call setInterval,.
try to add a button to the component to add a click event to call setInterval and find that the click event cannot be triggered.
just contacted Vue.js, if the question asked is more sb, light spray.
finally, thank you in advance!

//
<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="-sharp409eff";
           context.fillRect(10,10,this.width,this.width);
           this.width=this.width+10;
         }


        }
    }
</script>

<style scoped>

</style>

// <template> <div><canvas width="400" height="400" ref="drawing"></canvas></div> </template> <script> var interval;//new added export default { mounted(){ interval=setInterval(this.drawing,200); }, name: "canvas-animation", data(){ return {width:100} }, methods:{ drawing() { var context=this.$refs.drawing.getContext("2d"); context.fillStyle="-sharp409eff"; context.fillRect(10,10,this.width,this.width); this.width=this.width+10; if(this.width==290){ console.log("over"); clearInterval(interval); } } } } </script> <style scoped> </style>