<template>
    <div class="row">
        <div class="col">
            <div class="bold m-b-5">{{this.order.address.reference}}</div>
            <div class="hint-text semi-bold">{{this.order.address.contact}}</div>
            <div class="m-t-15 m-b-15 hint-text">{{this.order.address.street_one || ''}} {{ this.order.address.street_two || '' }} {{this.order.address.city || '' }} {{this.order.address.post_code || ''}} {{this.order.address.state || ''}} {{this.order.address.country || ''}}</div>
            <small class="block text-complete pointer all-caps">Change Address</small>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                order: this.data,
            }
        },
        watch: {
            'data': function() {
                this.order = this.data;
            }
        },
    }
</script>