How does item of array delete?

new Vue({
		el: '#app',
		data: {
		    userId: '',
		    id: '',
		    title: '',
		    body: '',
		    posts: null,

		    item: '',
		    itemPost: false
		},
		methods: {
		DeleteItemPost(i) { 
				this.posts.splice(i, 1);
			}
		},
		mounted() {
			axios.get('https://jsonplaceholder.typicode.com/posts')
			.then(response => this.posts=response.data);
			}
	})

.post-wrapper ul{
	margin: 5px;
	width: 120px;
	border: 2px solid orange;
}

.post-wrapper {
	display: flex;
	flex-wrap: wrap;
}

<div id="app">
<div v-show="userId"><b>UserId</b> -{{ userId }}</div>
	<div v-show="id"><b>Id</b> -{{ id }}</div>
	<div v-show="title"><b>Title</b> -{{ title }}</div>
	<div v-show="body"><b>Body</b> -{{ body }}</div>
</div>
  
  
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>