How to access methods of object passed via props to component - vue.js

Question

I have a model class for an address where I've defined a method to return the full street (combined from two seperate properties on the address model). Now I wanted to pass such an object via props to a component and use the full street method to display it.
Unfortunately, it seems that the component loses the type of the object as the method call isn't recognized in the template...
Isn't it possible to use methods in templates?
Here's some simplified code:
Parent component:
<template>
<div>
<AddressDisplay v-bind:address="AddressModel = { street: 'Bleeker', streetNr: '1' }" />
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import AddressDisplay from '#/components/AddressDisplay.vue';
export default Vue.extend({
components: { AddressDisplay },
});
</script>
Child component:
<template>
<div>
{{ address.fullStreet }}
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
address: { type: Object, required: true },
},
created() {
console.log(this.address.type);
},
});
</script>
Type definition for model:
class AddressModel implements Model {
street = '';
streetNr = '';
get fullStreet(): string {
return this.street + ' ' + this.streetNr;
}
}
What happens: nothing! There is no error message, but nothing is displayed. The console print type 'undefined'.

Answer 1

Why you write it like this: v-bind:address="AddressModel = { street: 'Bleeker', streetNr: '1' }"? What do you expect? Especially when you don't even import "AddressModel". Have a look at examples https://class-component.vuejs.org/guide/class-component.html#data
This will probably work:
<template>
<div>
<AddressDisplay v-bind:address="address" />
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import AddressDisplay from '#/components/AddressDisplay.vue';
export default Vue.extend({
components: { AddressDisplay },
data(){ return {
address: { street: 'Bleeker', streetNr: '1' }
}}
});
</script>