如何在 Vue.js 中将 InnerHtml 复制到剪贴板？

我想将此 for 循环的内容复制到剪贴板中：

<div ref="text" class="links">
        <div class="row" v-for="(name, index) in resultNames" :key="index" >                                    
            <p>{{makeUrl(name)}} </p>
        </div>   
</div>  
<button   @click="handleCopy">Copy to Clipboard</button> 

我跟着this https://stackoverflow.com/a/45041489/517235回答并想出了这个方法：

  handleCopy() {
     this.$refs.text.select();
     document.execCommand('copy');
    }

但这会导致：

Uncaught TypeError: this.$refs.text.select is not a function

所以我不知道如何在不使用第三方 javascript 插件的情况下解决这个问题？

P.S.我尝试了一些 JS 特定的建议答案，例如this https://stackoverflow.com/questions/1173194/select-all-div-text-with-single-mouse-click/1173319#1173319，但出现错误：

Uncaught TypeError: Failed to execute 'selectNode' on 'Range': parameter 1 is not of type 'Node'.

基于this https://stackoverflow.com/a/1173319/5734311答案，这是一个选择的函数HTMLElement's text:

selectText(element) {
  var range;
  if (document.selection) {
    // IE
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    range = document.createRange();
    range.selectNode(element);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}

剩下要做的就是 a) 传递元素 b) 调用复制命令：

this.selectText(this.$refs.text); // e.g. <div ref="text">
document.execCommand("copy");