upccrt/resources/js/components/woinfo.vue

<template>
    <div>
        <p><i class="fas fa-info-circle"></i> <span v-text="this.data.probdesc"></span></p>
        <p><i class="far fa-lightbulb"></i> <span v-text="this.data.suggested"></span></p>
        <p><i class="fas fa-paste"></i> <span v-text="this.data.woid"></span></p>
        <p><i class="fas fa-building"></i> <span v-text="this.data.storeid"></span></p>
        <p><i class="fas fa-sign-in-alt"></i> 
            <span class="dashed-underline" data-toggle="tooltip" data-placement="bottom" v-bind:title=this.getHRDate(this.data.dropdate)>
                {{ Math.floor(this.daysSinceToday(this.data.dropdate)) }} days ago
            </span>
        </p>
        <p><i class="fas fa-sign-out-alt"></i> 
            <span class="dashed-underline" data-toggle="tooltip" data-placement="bottom" v-if="!this.isZero(this.data.pickupdate)" v-bind:tittle=this.getHRDate(this.data.pickupdate)>
                {{ Math.floor(this.daysSinceToday(this.data.pickupdate)) }} days ago
            </span>
        </p>
    </div>
</template>
<script>
    import dateMixin from '../mixins/dateMixin'
    export default {
        mixins: [dateMixin],
        props: ['workOrder'],
        data() {
            return {
                data: JSON.parse(this.workOrder),
            }
        },
        mounted() {
            Echo.channel('work-orders')
                .listen('WorkOrderUpdated', (e) => {
                    this.data = JSON.parse(e.data);
                });
        }
    }
</script>