title: Props gotten directly from vue 3 setup are not reactive
body: <p>I am writing an application in vuejs and i want to pass prop to a child component but I am getting this error:</p>
  <blockquote>
  <p>Getting a value from the <code>props</code> in root scope of <code>setup()</code> will cause the value to lose reactivity</p>
  </blockquote>
  <p>Parent component</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
        &lt;course-list :courseId = &quot;id&quot;  /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import {useRoute} from 'vue-router';
  import { ref, onMounted, reactive} from 'vue';
  export default defineComponent({
    components: { NavBar, CourseList, CourseContent },
    props:{
      courseId: String
    },
    setup(){
        const route = useRoute()
  
        const id = route.params.id
        console.log(&quot;the course id is&quot;, id);
  
      return{
        id
      }
    }
  }
  </code></pre>
  <p>Child Component</p>
  <pre class="lang-js prettyprint-override"><code>export default defineComponent({
    components: { CourseTopic },
    props: {
        courseId: {
          type: String
        }
      },
    setup(props) {
  
      const trainingCourseId = props.courseId;
  
      return { courses, trainingCourseId };
    },
  });
  </code></pre>
  <p>How do I solve this problem?</p>