vue 输入框根据光标的位置点击下面的内容在后面追加文字，先这个是一个组件，在其他组件中输入框的内容一直是第一次的值怎么办呢？

Question

1，这是第一个组件的值

2点第二个组件插入词包就会有问题

3。点击词包的代码

cibaoAction (val) {
            // 插入动态词包
            if (this.currentModel.title.includes(val)) {
                return;
            }
            console.log(val)
            var elInput = document.getElementById('title');
            var startPos = elInput.selectionStart;
            var endPos = elInput.selectionEnd;
            if (startPos === undefined || endPos === undefined) return
            var txt=elInput.value;
            var result = txt.substring(0, startPos) + '{' + `${val}` + '}' + txt.substring(endPos);
            console.log(elInput.value,txt)
            let str = eval("/" + '}' + "/ig");
            let mac = this.currentModel.title.match(str);
            if (mac != null && mac.length >= 2) {
                this.$message.error('最多插入两个词包');
                return;
            }
            this.currentModel.title=result;
        }

这要怎么解决呢，有人遇到类似问题吗？