Vue.js Insert an Array of Objects at a Specific Position in an Array

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
   <div id="app">
		<h3>Vue Js Insert an array of objects at Nth place in an array</h3>
        <div v-for="item in updatedList" :key="item.id">{{ item.uid }} {{ item.name }}</div>
   </div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					oldArray: [
						{ uid: 101, name: 'John Resig' },
						{ uid: 102, name: 'Linus Torvalds' },
						{ uid: 103, name: 'Ada Lovelace' },
						{ uid: 104, name: 'Guido van Rossum' },
						{ uid: 105, name: 'Grace Hopper' },
						{ uid: 106, name: 'Tim Berners-Lee' },
						{ uid: 107, name: 'Bjarne Stroustrup' },
						{ uid: 108, name: 'James Gosling' },
					],
					newArray: [
						{ uid: 342, name: 'Yukihiro Matsumoto' },
						{ uid: 343, name: 'Anders Hejlsberg' },
						{ uid: 342, name: 'Andrew' },
					],
					positionToInsert: 4,
					updatedList: [],
				};
			},
			mounted() {
				const part1 = this.oldArray.splice(0, this.positionToInsert);
				const part2 = this.oldArray;
                this.updatedList = [...part1, ...this.newArray, ...part2];
			},
		});
		app.mount('#app');
	</script>
</body>
</html>