如何在运行时用Element-UI按钮替换VueJS中一些选中的文本？

import { Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

export default {
  components: {
    'el-button': Button
  },
  // ...
}

<template>
  <div>
    <input type="text" v-model="text" ref="input" />
    <el-button @click="replaceText">替换</el-button>
  </div>
</template>

export default {
  // ...
  methods: {
    replaceText() {
      const input = this.$refs.input;
      const start = input.selectionStart;
      const end = input.selectionEnd;
      const selectedText = this.text.substring(start, end);
      const buttonText = '替换后的文本'; // 替换为按钮的文本

      this.text = this.text.substring(0, start) + buttonText + this.text.substring(end);
    }
  }
}