Why can I just change count and update it in the child component?

[icoderMonkey]

Vue version

^3.2.47

Link to minimal reproduction

https://play.vuejs.org/#__DEV__eNq9UstugzAQ/BXLF4gScNVWqoQISpUf6L3ugYCT0OCHbJOqQvx713aKCKlyrDjtzuzOzuAevyqVnjuGM5ybSjfKIsNspwoqGq6ktqhHmu3RgPZachQBNRqh7bFp6wuQEl+5XUCgopLCWFTJTli0divihwUVOQkisN59uWVctaVlUCOUq6LvLyPDkBN3BHR3nbVSoE3VNtVpTbEnLJcUF8ucBPAOMUmAmFwTw92Zx395FCMCaE7Gk/AKj5b+iCcYVFoqAwZrtm8Ee3NV/B75jdEHGA6sYynqlm3dXcCNF2hdoN6d4mDZsrSVh9ivSv0oDA6zsG6i8reNIf1XdHPixBmQTfkdEgk2JqPXuYb3k/BSpZ9GCkjXp0EvgKE4C/m4HsTvatCyVpmMkE6o0wEUONkARjQoNZwlteSbp/QxfX4hdWPstJ8yw5Odll+GaVCkeDVZTqB5ZjrRTNRMM31XbMa9EpxhN6JOE37rgIcfCt0ygQ==

Steps to reproduce

<script setup> import { ref } from 'vue' import Child from './Child.vue' const count = ref(0) </script>

{{ count }}

+ - <script setup> const props = defineProps(['count']) </script>

Child

props：{{ count }}

+ -

What is expected?

I know how to use props properly, but there will be no warning on the console and the data in the child component will be updated normally. This is like redeclaring the ref result with count alone in the child component, and it won't affect the change of count in the parent component

What is actually happening?

It normally modifies the count in the child component and is the latest value when the count is printed without any effect.
I found that switching to the dev version of the Vue SFC Playground does have this problem, and whenever you switch to prod there is a warning

System Info

No response

Any additional comments?

No response

[edison1105]

The warning should also be displayed in development mode

[Shyam-Chen]

You can use the vue/no-mutating-props rule in ESLint.