操作后在元素上显示其他工具提示

Question

我想实现以下功能：将鼠标悬停在按钮上时，显示一条消息：“复制链接”，单击按钮后，我将显示工具提示，并显示消息：“已复制”。我不知道如何实现这一目标。这时我有（当然，它的行为不如我想要的那样）：

模板：

<template>
  <v-tooltip bottom v-model="copied">
    <template v-slot:activator="{ on }">
      <v-btn small icon @click.stop="invoke" v-on="on" color="indigo">
        <v-icon>mdi-link</v-icon>
      </v-btn>
    </template>
    <v-icon v-if="copied">mdi-check</v-icon>
    <span v-if="!copied">Copy link</span>
    <span v-if="copied">Copied</span>
  </v-tooltip>
</template>

和代码：

<script>
export default {
  name: 'btn.task.copylink',
  data () {
    return {
      copied: false
    }

  },
  props: [
    'source'
  ],
  methods: {
    invoke: function () {
      this.copied = false
      var props = {
        name: 'view.work.tasks.details',
        params: {
          companyId: this.$route.params.companyId,
          projectId: this.$route.params.projectId,
          taskId: this.source.id
          }
        }
      this.copied = true
      var link = props.href
      this.$clipboard(link)
    }
  }
}
</script>

它应该像我描述的那样工作吗？