title: Default value for props like an object didn't work
body: <p>I have a very strange situation :</p>
  <p>My <code>HomeComponent.vue</code></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;home&quot;&gt;
      &lt;img alt=&quot;Vue logo&quot; src=&quot;../assets/logo.png&quot; /&gt;
      &lt;HelloWorld :msg=&quot;msg&quot; @update=&quot;inputUpdated&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
    import { defineComponent } from &quot;vue&quot;;
    import HelloWorld from &quot;@/components/HelloWorld.vue&quot;; // @ is an alias to /src
    import { Message } from &quot;@/interfaces/message&quot;;
  
    export default defineComponent({
      name: &quot;Home&quot;,
      components: {
        HelloWorld,
      },
      setup(props, { emit }) {
        const msg: Message = {
          year: 2020,
        };
        function inputUpdated(value): void {
          console.log(&quot;Get Event : &quot; + value);
        }
        return {
          msg,
          inputUpdated,
        };
      },
    });
  &lt;/script&gt;
  </code></pre>
  <p>My <code>HelloWorld.vue</code></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;hello&quot;&gt;
      &lt;h1&gt;{{ msg.title }} in the year : {{ msg.year }}&lt;/h1&gt;
      &lt;button @click=&quot;increment&quot;&gt;count is : {{ count }}&lt;/button&gt;
      &lt;div&gt;{{ pow(2, 3) }}&lt;/div&gt;
      &lt;p&gt;Edit &lt;code&gt;component&lt;/code&gt; to test state is {{ state.year }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
    import { defineComponent, ref, reactive, PropType } from &quot;vue&quot;;
    import { State } from &quot;@/interfaces/state&quot;;
    import { Message } from &quot;@/interfaces/message&quot;;
  
    export default defineComponent({
      name: &quot;HelloWorld&quot;,
      props: {
        msg: {
          type: Object as PropType&lt;Message&gt;,
          required: true,
          default: function () {
            return {
              title: &quot;Arrow Function Expression&quot;,
              year: 2020,
            };
          },
        },
      },
      setup(props, { emit }) {
        console.log(props);
        const count = ref(0);
        const state: State = reactive({
          title: &quot;&quot;,
          year: 2020,
        });
        function pow(x: number, y: number): number {
          return Math.pow(x, y);
        }
  
        function increment(): void {
          console.log(&quot;Emit : Hello World&quot;);
          emit(&quot;update&quot;, &quot;Hello World&quot;);
          count.value++;
        }
  
        return {
          count,
          increment,
          pow,
          state,
        };
      },
    });
  &lt;/script&gt;
  </code></pre>
  <p>The interface <code>Message</code> :</p>
  <pre><code>export interface Message {
      title?: string;
      year?: number;
  }
  </code></pre>
  <p>The problem what I have is even if I created a <code>default</code> for <code>msg</code> props didn't work, is not taken into account. I have the message <code>in the year :</code>. What I'm doing wrong with default values for props values ? Thx in advance and sorry for my english.</p>