Vue3 ref构建响应式变量失效如何解决

<template>  <p>{{userName}}</p>  <button @click='change()'>change</button></template><script>  //引入定义响应式数据的函数  import {reactive} from 'vue';  import {ref} from "@vue/reactivity"; //!!!!!注意，这里有个坑，ref必须是引用自vue，而非@vue/reactivity  export default {  name: 'App',  //为Vue3的新特性提供统一入口，代码都会在这个函数中添加  //在beforecreated之前进行，因此无法访问this，亦即无法访问data和method  setup(){    //定义响应式数据：数据变化，模板中渲染会自动刷新    // const obj=reactive({    //   userName:'jack',    // });    //只定义一个变量,可以使用ref将变量定义为响应式    let userName=ref('jack')    console.log(userName);    const change=()=> {      userName.value='rose'     //注意修改的是ref对象的value属性，但是在template中使用的时候不需要再加value      console.log(userName);    }    return {userName,change}  },}</script>

import {ref} from "@vue/reactivity"

import {ref} from "vue"

<template>  <h2>{{ title }}</h2></template> <script>  export default {    data() {      return {        title: "Hello, Vue!"      };    }  };</script>

<template>  <h2>{{ title }}</h2>  <h3>{{ data.author }}</h3>  <button @click=""changeTitle>修改title</button></template> <script>  import { ref, reactive, toRefs } from "vue";  export default {    setup() {      const title = ref("Hello, Vue 3!");      // 修改      function changeTitle(){        title.value == "Hello, Vue3!"      }       const data = reactive({        author: "青年码农",        age: "18"      });       return { title, data, changeTitle };    }  };</script>

const title = ref("Hello, Vue 3!");

title.value = "Hello, Vue3!"

const data = ref({    author: "青年码农",    age: "18"});

data.value.author = "nmgwap";

const data = reactive({    author: "青年码农",    age: "18"});

data.author = "nmgwap"