vue3 子组件值传给父组件非响应式

Question

最近在学vue，通过defineEmits，在自组件中为父组件中的响应式数据赋值，发现并没有响应式的刷新显示，有点困惑，是设定如此吗？
子组件

<script setup lang="ts">
import { ref } from 'vue'
  defineProps({
    num: {},
    msg: {
      type: String,
      default: "",
    },
  });
  defineEmits(["update","deliver"]);
</script>
<template>
  <div class="child">
    子组件
    <h3>接受到父组件的值:{{ num }}and{{ msg }}</h3>
    <button @click="$emit('update')">改变父组件值</button>
    <button @click="$emit('deliver','hello')">传值给父组件</button>
  </div>
</template>

父组件

<script setup lang="ts">
import { ref } from 'vue';
import child from './child.vue';
    var msg="父组件的msg"
    var num=ref(10);
    var childMsg=ref('dasd')
const updateValue=()=>{
    msg="被修改",
    num.value+=2
}
const getChildValue=(v)=>{
    childMsg=v
    console.log(childMsg);
    
}
</script>
<template>
    <div>
        父组件接受子组件的数据{{childMsg}}
        <child :msg="msg" :num="num" @update="updateValue" @deliver="getChildValue"></child>
    </div>
</template>

点击“改变父组件值”按钮后，刷新了

Answer 1

付组件

<script setup lang="ts">
import { ref } from 'vue';
import child from './child.vue';

var msg = ref("父组件的msg");
var num = ref(10);
var childMsg = ref('dasd');

const updateValue = () => {
  msg.value = "被修改";
  num.value += 2;
};

const getChildValue = (v) => {
  childMsg.value = v;
  console.log(childMsg.value);
};
</script>

<template>
  <div>
    父组件接受子组件的数据 {{ childMsg }}
    <child :msg="msg" :num="num" @update="updateValue" @deliver="getChildValue"></child>
  </div>
</template>