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>

failed because if (this.width==290) { you only tested it the first time, but not in the later interval .

//
<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>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e46060-44b8d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e46060-44b8d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?