Well, I finally managed to solve it. (Before submitting, I spend a lot of time figuring out. I don’t know how I solved it so fast)
var ComponentClass = Vue.extend(Annotation);
var instance = new ComponentClass();
Where: Annotation is a Vue component and the Range is the selection range obtained previously.
I hope this help someone else!
I want to wrap some plain text in a Vue component dynamically, using mouseUp after selecting the text.
<div> Hello World! </div> =>
<div> <Greeting/> World! </div>
Right now, I’m wrapping it using
document.createElement("span") and surrounding the range of the selection with it.
I have found similar questions like the next one, but I’m trying to avoid render level:
How can I dynamically wrap a substring with a component in Vue.js?
Well, if you solved it, you might as well accept your own answer.