why does the function excute twice in child component?

[zhoufanglu]

Vue version

3.2.25

Link to minimal reproduction

https://codesandbox.io/s/affectionate-snow-p9eu4z?file=/src/App.vue

Steps to reproduce

• index

<template>
  <HelloWorld :msg="msg" />
</template>

<script>
import HelloWorldVue from "./components/HelloWorld.vue";
import { ref } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
  },
  setup() {
    const msg = ref("");
    setTimeout(() => {
      msg.value = "aaaaa";
    }, 1000);
    return {
      msg,
    };
  },
};
</script>

• child

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const fn = () => {
      console.log("xxxxx");// excute twice
    };
    return {
      fn,
    };
  },
};

What is expected?

i think this fn will excute once

What is actually happening?

fn excute twice

System Info

No response

Any additional comments?

No response