title: Vue3 reactive nested object and optional typings
body: <p>I seem to have stumbled upon somewhat of a challenge... Maybe a bug in Vue3 with Typescript and the composition api, or maybe im overlooking something.</p>
  <p>Im not getting any intellisense in my IDE (Webstorm) if I have an object that is typed as optional:</p>
  <p>I have setup this small example:
  With this, you would expect that when dotting after .comment you would get &quot;commentAuthor&quot; as a suggestion on that object, but I dont get this. However, if I in my interface tell that comment shouldn't be optional, I get the correct intellisense - If you check out my attached image below, you can see what I mean</p>
  <pre><code>&lt;template&gt;
    &lt;h2&gt;This is a Vue 3 component!&lt;/h2&gt;
    {{ test.post.comment.commentAuthor }}
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent, reactive } from &quot;vue&quot;;
  
  interface Comment {
    id: string;
    commentAuthor: string;
    topFriend?: {
      uid: string;
      name: string;
    };
  }
  interface Post {
    id: string;
    postContent: string;
    comment?: Comment;
  }
  
  export interface TestInterface {
    id: string;
    name: string;
    post: Post;
  }
  
  export default defineComponent({
    setup() {
      const test = reactive({
        id: &quot;123&quot;,
        name: &quot;John doe&quot;,
        post: {
          id: &quot;333&quot;,
          postContent: &quot;Lorem ipsum&quot;,
          comment: {
            id: &quot;444&quot;,
            commentAuthor: &quot;Jane Doe&quot;,
            topFriend: {
              uid: &quot;555&quot;,
              name: &quot;Donald Duck&quot;,
            },
          },
        },
      }) as TestInterface;
  
      return {
        test,
      };
    },
  });
  &lt;/script&gt;
  </code></pre>
  <p>With optional prop in my interface
  <a href="https://i.stack.imgur.com/AtxJ7.png" rel="nofollow noreferrer">With optional prop in my interface:</a></p>
  <p>Without optional prop
  <a href="https://i.stack.imgur.com/BMQHR.png" rel="nofollow noreferrer">Without optional prop</a></p>
  <p>Why is this happening? Im thinking it's often one would have optional objects, so I believe Vue should be able to handle this?</p>