v-tooltip内路由按钮触发attrs未定义报错如何解决

页面渲染、点击v-tooltip内的路由按钮时抛出报错：Property or method "attrs" is not defined on the instance but referenced during render
业务场景为在v-tooltip组件的activator插槽内嵌套router-link与v-btn组件，预期点击按钮时跳转至站内名为trabajosObservaciones的路由页面，原实现代码如下：

<v-tooltip bottom mg="1">
    <template v-slot:activator="{ on, attrs }">
        <router-link
            :to="{
                name: 'trabajosObservaciones',
                params: { datos: item },
            }"
        >
            <v-btn
                v-bind="attrs"
                v-on="on"
                color="orange"
                fab
                x-small
                dark
                class="ml-2"
            >
                <v-icon>mdi-briefcase-eye</v-icon>
            </v-btn>
        </router-link>
    </template>
    <span>Ver Trabajos</span>
</v-tooltip>

• 核心原因是当前使用的Vuetify版本中，v-tooltip的activator作用域插槽并未返回attrs字段，模板中解构了不存在的插槽属性，Vue实例渲染时找不到对应变量就会抛出该错误。
• 原写法存在事件绑定层级问题：把tooltip需要的触发事件绑定在内层v-btn上，外层嵌套的router-link会拦截点击事件，就算解决attrs报错，也会出现tooltip无法正常弹出、路由跳转触发异常的问题。

任选以下一种方案修改即可：

方案1：移除不存在的attrs解构，调整事件绑定层级 #

去掉无效的attrs解构，将tooltip的触发事件绑定到外层router-link上，避免事件冲突，修改后代码如下：

<v-tooltip bottom mg="1">
    <template v-slot:activator="{ on }">
        <router-link
            v-on="on"
            :to="{
                name: 'trabajosObservaciones',
                params: { datos: item },
            }"
        >
            <v-btn
                color="orange"
                fab
                x-small
                dark
                class="ml-2"
            >
                <v-icon>mdi-briefcase-eye</v-icon>
            </v-btn>
        </router-link>
    </template>
    <span>Ver Trabajos</span>
</v-tooltip>

方案2：移除多余的router-link嵌套，直接用v-btn实现路由跳转 #

v-btn组件原生支持to属性实现路由跳转，不需要额外嵌套router-link，写法更简洁，也从根源避免事件冲突：

<v-tooltip bottom mg="1">
    <template v-slot:activator="{ on, attrs }">
        <v-btn
            v-bind="attrs"
            v-on="on"
            :to="{
                name: 'trabajosObservaciones',
                params: { datos: item },
            }"
            color="orange"
            fab
            x-small
            dark
            class="ml-2"
        >
            <v-icon>mdi-briefcase-eye</v-icon>
        </v-btn>
    </template>
    <span>Ver Trabajos</span>
</v-tooltip>

若使用方案2仍报attrs不存在的错误，直接删除代码中v-bind="attrs"这一行即可，tooltip的触发、显示功能不会受影响。

内容的提问来源于stack exchange，提问作者Agustin Coronel