Form for adding array elements in Vue

Let's add text from the input to the end of the array reactively. Let's get started with the implementation. Let's say we have an array:

data() {
	return {
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

Let's add the newItem property, which supports the input:

data() {
	return {
		newItem: '',
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

Let's output the contents of the array as a list:

<template>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
		</li>
	</ul>
</template>

Let's now make an input and a button, which, when clicked, will add the input text to the end of the list as a new item:

<template>
	<input v-model="newItem">
	<button @click="addItem">add</button>
</template>

When the button is clicked, the addItem method will be called, which will take the text from the input and add it as a new element to the array, which will result in a reactive change to the list:

methods: {
	addItem: function() {
		this.items.push(this.newItem);
	}
}

Given an array. Given an input. Given a button. Output the elements of this array as a list ul. Make it so that when the button is pressed, the text from the input is added to the end of the list.

Modify the previous task so that the new item is added to the top of the list.