请教一个 vue 中组件复用的问题

如何让复用的组件内部代码随着切换多次执行呢？

App.vue 组件：有两个按钮，点击按钮下面 div 显示对应按钮中的文字

<template> <button @click="changeData($event)">user1</button> <button @click="changeData($event)">user2</button> <User :name="data"></User> </template> <script setup> import { ref } from 'vue'; import User from './components/user.vue'; let data = ref('') function changeData(e) { data.value = e.target.innerText } </script> 

User.vue 组件：

<template> <div> {{ name }} </div> <!-- <div> {{ attrs.name }} </div> --> </template> <script setup> import { useAttrs } from 'vue'; let attrs = useAttrs() let name = attrs.name console.log(name); </script> 

如果在 template 中直接使用 attrs.name 是没问题的，不会丢失响应式

如果使用变量 name 接收，因为组件内部代码只执行一次的缘故，就不能实现切换文字效果

如何才能让 User 组件内部的代码随着 button 点击多次执行呢？