Getting a value from the props in root scope of script setup will cause the value to lose reactivity

This is because the props object is passed down as a read-only reactive proxy in the component's setup function. When a value is accessed from the props object in the root scope of <script setup>, it is not being tracked by Vue's reactivity system. Therefore, any changes made to that value will not trigger updates in the component's template.

To ensure reactivity, values from the props object should be accessed and used within the component's reactive scope, such as within a computed property, a watcher, or a method. This allows Vue to track changes to the value and trigger updates accordingly.