0👍
I don’t think this can be done in a simple way as you might imagine it (just setting pointers etc). Without major changes to your example you will not be able to achieve what you want. I prepered a really really really small example of how you could do it. There are no checks and this should never ever be used as I did it in any productive way – it’s just as a sample to clarify the idea.
https://jsfiddle.net/amrw0rer/1/
What you could and probably should actually do is to put input fields inbetween the non-editable text parts. The sample shows it for one input – it won’t work with two because of the string splitting part.
The enhancement would be to put the input field always at the position you are currently allowed to change.
<span>{{ textBeforeInput }}</span><input v-model="newText" /><span>{{ textAfterInput}}</span>
You might event want to wrap the input into a form and listen to the submit event to change to the next pointer. The only thing you then need to do is to update the textBefore and textAfterInput values and save the newText to wherevery you need it.