为什么通过ref声明响应式变量页面不对应渲染？

老师你好，

我不用toRefs，直接声明或使用ref声明获取全局数据，全局数据有修改成功（控制台打印是修改后的lee），但页面显示的数据却没变。

代码：

<template>
  <div>{{name}}</div>
  <button @click='handleClick'>修改</button>
</template>
<script>
import { ref } from 'vue';
import { useStore } from 'vuex';
export default {
  name: "App",
  setup(){
    const store = useStore();
    // 方式一：直接获取全局数据name
    const name = store.state.name;
    // 方式二：声明为ref获取，也不行，页面没修改
    // const name = ref(store.state.name);
    const handleClick = () => {
      store.commit('changeName','lee');
    }
    return { name, handleClick };
  }
};
</script>
<style lang="scss">
</style>

store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    name: 'dell'
  },
  getters: {
  },
  mutations: {
    changeName(state, str) {
      state.name = str;
      console.log(state.name);  // 全局数据有修改，但页面没变
    }
  },
  actions: {
  },
  modules: {
  }
})

结果：

问题一：全局数据是否默认就是响应式数据？

问题二：不用toRef解构，如何让页面上的值同步变化？