안녕하세요 선생님 수업에는 관련이 없긴 하지만 질문 한 가지만 드리겠습니다!

C번을 해결하려고 했는데 무엇을잘못했는지 +1 변경이 먹지가 않는데 이유가 있을까요?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>과제 1</title>
</head>
<body>
<style>
button{
width: 60px;
height: 28px;
background-color: #004fff;
color: white;
border-radius: 10px;
box-shadow: 0 4px;
border: none;
}
button:focus{
outline: 0;
}
button:hover{
background-color: skyblue;
cursor: pointer;
}
</style>
<h2>숫자 배열 조작과 구구단 출력</h2>
<div id = "app">
<ul>
<li v-for = "item in number_list">{{item}}
<button @click = "modifyNumber(item)">변경</button>
<button @click = "deleteNumber(number_list)">삭제</button>
</li>
</ul>
<button @click = "addNumber(number_list)">추가</button>
<button @click = "sortData(number_list)">소트</button>
<button @click = "showNumber(number_list)">구구단 보이기</button>
<hr>
<li v-if ="view" v-for = "(item,index) in number_list">
<p v-for = "i in number_list">{{number_list[index]}}x{{i}}={{item * (i)}}</p>
</li>
</div>
<script>
new Vue({
el:'#app',
data:{
number_list:[2,3,4,5,6,7,8,9],
result : 0,
view : false
},
methods: {
sortData:function(listdata){
listdata.sort(function(a,b){
return(a < b ? -1 : 1)
})
},
addNumber : function(){
this.number_list.push('1')
},
modifyNumber : function(index){
this.number_list.splice(index, 1,number_list+1)
// 배열.splice(지정위치, 1, 변화데이터)
},
deleteNumber : function(index){
this.number_list.splice(index, 1)
// 배열.splice(지정위치, 1)
},
showNumber : function(number_list){
this.view = true
},
}}
)
</script>
</body>
</html>
감사합니다
