Lottball.vue에서 궁금한점이 있어 질문드립니다.

현재 방식에서는
볼의 색상을 표현할떄

     computed:{
                       
            backGround(){
                
            let background;
            if(this.number <=10){
                background ='red';   
            }
            else if(this.number <=20){
                background='orange';
            }
            else if(this.number<=30){
                background='yellow';
            }
            else if(this.number <=40){
                background ='blue';
            }
            else{
                background='green';
            }
            return {background,};
            } 
        },

이런식으로 computed에 넣으신뒤 바뀌는구조로 갔는데

        mounted(){
            
            if(this.number <=10){
                this.color ='red';   
            }
            else if(this.number <=20){
                this.color='orange';
            }
            else if(this.number<=30){
                this.color='yellow';
            }
            else if(this.number <=40){
                this.color ='blue';
            }
            else{
                this.color='green';
            }
               
        },

이런식으로 mounter()로해서 하게되는것과의 차이가 (현재 컴포넌트에서는 동일하게동작)


실제 자식컴포넌트가 삭제가 안되고 재사용을 하게되는경우엔
computed로 사용하게된다면 실시간으로 반응성이되지만
mouted로 하게되면 자식컴포넌트가 삭제가된것이 아니기때문에 반응을 안하기때문에
computed로 사용한것이다
2. 캐싱 때문도 있고

라고 이해해도 될까ㅓ요?