Remove dynamically-added Vue component - vue.js

Question

I'm updating a form built with Vue that lets you dynamically add and remove blocks of fields. Currently, it's set up so that the add and remove buttons are at the bottom of the interface and the remove button removes blocks in the reverse order of how they're added.
Now I need to update it so that each block or row has its own remove button so that you can remove any block. Because at the moment, if you add 10 blocks, and then decide you want to remove the first one, you have to remove all others first.
I've created a Vue Sandbox to illustrate. At the moment, even though I've got remove buttons per row, they're still only removing the rows in reverse order as before. That's because the remove function is just reducing the index by 1 each time.
But I'm not sure what I need to update though so that it removes the component matching the id of the button you click on.
Parent component
<template>
<div>
<component
:is="fieldType"
v-for="i in index"
:key="i"
:index="i"
#add="add"
#remove="remove"
/>
<div>
<button type="button" #click="add">Add {{ label }}</button>
</div>
</div>
</template>
<script>
import textField from "./textField";
export default {
components: {
textField,
},
props: {
fieldType: {
type: String,
required: true,
},
label: {
type: String,
default: "",
}
},
data: () => ({
index: 0,
}),
methods: {
add() {
this.index += 1;
},
remove() {
this.index -= 1;
},
},
};
</script>
Child component
<template>
<div>
<label :for="'text-' + index" v-text="'Text' + index"></label>
<input :id="'text-' + index" type="text" name="" />
<button v-if="index" type="button" #click="$emit('remove', index)">
Remove
</button>
</div>
</template>
<script>
export default {
props: {
index: {
type: Number,
required: true,
},
},
};
</script>