title: Vue.js 3: props type validation with custom type
body: <p>I am developing a single page application using Vue.js 3 and Typescript.</p>
  <p>The problem affects a view and a single file component. <code>People.vue</code> retrieves data from the backend and displays it in multiple <code>PersonRow.vue</code> components using <code>v-for</code>. Although data property types are explicitly defined, I get a warning in the browser console:<br />
  <code>[Vue warn]: Invalid prop: Type check failed for prop &quot;person&quot;. Expected Person, got Object</code></p>
  <p>Everything is working fine and I could change the property type in <code>PersonRow.vue</code> to <code>Object</code> to get rid of the warning but I would like to have type checks working correctly.</p>
  <p><strong><code>People.vue</code></strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;PersonRow v-for=&quot;person in people&quot; :key=&quot;person.id&quot; :person=&quot;person&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from 'vue'
  import { Person, getPeople } from '../services/person'
  import PersonRow from '@/components/PersonRow.vue'
  
  export default defineComponent({
    components: {
      PersonRow
    },
    data () {
      return {
        people: new Array&lt;Person&gt;()
      }
    },
    mounted () {
      getPeople().then(
        response =&gt; {
          this.people.push(...response)
        })
    }
  })
  &lt;/script&gt;
  </code></pre>
  <p><strong><code>PersonRow.vue</code></strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col&quot;&gt;{{ person.givenName }}&lt;/div&gt;
      &lt;div class=&quot;col&quot;&gt;{{ person.familyName }}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from 'vue'
  import { Person } from '../services/person'
  
  export default defineComponent({
    props: {
      person: {
        type: Person,
        required: true
      }
    }
  })
  &lt;/script&gt;
  </code></pre>
  <p><strong><code>person.ts</code></strong></p>
  <pre class="lang-js prettyprint-override"><code>export class Person {
    constructor (id: number, givenName: string, familyName: string) {
      this.id = id
      this.givenName = givenName
      this.familyName = familyName
    }
  
    id: number;
    givenName: string;
    familyName: string;
  }
  
  export async function getPeople (): Promise&lt;Person[]&gt; {
    const response = await fetch('https://api.example.com/people')
    return await response.json() as Person[]
  }
  </code></pre>