upccrt/resources/js/components/probdesc.vue

<template>
<div class="list-items">
    Problem Description: <div v-text="this.probdesc"></div>
    Suggested Solution: <div v-text="this.suggested"></div>
</div>
</template>
<script>
    export default {
        data() {
            return {
                probdesc: "",
                suggested: ""
            }
        },
        mounted() {
            let url = window.location.href;
            let id = url.substring(url.lastIndexOf('/') + 1);
            axios.get('/api/workorder/' + id).then((response) => {
                this.probdesc = response.data.probdesc;
                this.suggested = response.data.suggested;
            });
            Echo.channel('work-orders')
                .listen('WorkOrderUpdated', (e) => {
                    this.probdesc = e.probdesc;
                    this.suggested = e.suggested;
                    console.log('Received Websocket Update');
                });
        }
    }
</script>