I have been trying to insert emoji in textarea exactly where the cursor is at. I looked around how tos in the web could not find anything specific in VUE JS. Most of them are in plain JS.

I have this Code

<div class=picker v-show=showPicker>

    <click-outside :handler=handleClickOutside>

        <picker

            set =messenger

            title=Pick your emoji…

            emoji=point_up

            @click=addEmoji

            :emoji-size=16

        >

        </picker> 

    </click-outside>

</div>



<textarea id=greeting_text_input class=form-control

    type=text 

    v-model=greeting_text

    rows=8

    required

    placeholder=Hi {first-name}! Welcome to our bot. Click on the ‘Get 

    Started’ button to begin

>

</textarea>

My Method

addEmoji(emoji){

        this.greeting_text += emoji.native;

        this.showPicker = !this.showPicker;

    }

Obviously, this code will add the character (emoji, in my case) to the last of the string. I need a pure vuejs solution for this.
What would be the best practise for this kind of problem in Vue? as there are few solutions in the web that based either in vanilla JS or Jquery.