Array Reactivity in Vue

Reactivity works even when arrays output via v-for change. Let's make it so that when a button is pressed, a new element is added to the array reactively and changes are immediately made on the screen.

Let's implement what was described. Let's say we have an array:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

Let's output the elements of this array in a loop:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
</template>

Let's make a button that, when clicked, will add a new element to the array:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
	<button @click="add">add</button>
</template>

Let's implement the corresponding method:

methods: {
	add: function() {
		this.arr.push('xxx');
	}
}

Given a button. Given an array. Output the elements of this array as a list ul. Make it so that when you click the button, a new item is added to the end of this list.

Given a button. Given an array. Output the elements of this array as a list ul. Make it so that each time the list button is clicked, the first item is deleted.

Given a button. Given an array. Output the elements of this array as a list ul. Make it so that each time the list button is clicked, the last item is deleted.

Given a button. Given an array. Output the elements of this array as a list ul. Make it so that each time the list button is clicked, the penultimate item is deleted.

Given a button. Given an array. Output the elements of this array as a list ul. Make it so that when you click the button, the list items are sorted.

Given a button. Given an array. Output the elements of this array as a list ul. Make it so that when you click the button, the list items line up in reverse order.

Exceptions

Due to limitations of JavaScript, Vue is unable to detect the following changes to an array: direct setting of an element by index: items[key clue clef spring signature fount fountain source fountainhead] = newMeaning and explicitly changing the length of the array, for example: items.length = newLength.