upccrt/resources/js/components/AssetInfo.vue

<template>
    <div>
        <asset-info-edit-modal :modal-id="`asset${asset.pcid}editModal`" :populate-with="asset"></asset-info-edit-modal>
        <h4 class="text-center">{{ this.asset.pcmanu }} {{ this.asset.pcmake }} - <small class="text-muted">{{this.asset.pcnickname}}</small></h4>
        <p>OS: {{this.asset.pcextra[2]}}</p>
        <p>S/N: {{ this.asset.pcextra[104] }}</p>
        <p>CPU: {{ this.asset.pcextra[101]}}</p>
        <p>RAM: {{ this.asset.pcextra[100] }}</p>
        <p>Graphics: {{this.asset.pcextra[4]}}</p>

        <button type="button" class="btn btn-primary" data-toggle="modal" :data-target="`#asset${asset.pcid}editModal`">Edit</button>
    </div>
</template>
<script>
import AssetInfoEditModal from '../components/AssetInfoEditModal.vue'
export default {
    components: {
        AssetInfoEditModal,
    },
    props: {
        asset: {
            type: Object,
            required: true
        },
    },
    mounted() {
        Echo.channel('asset.'+this.asset.pcid)
                .listen('AssetUpdated', (e) => {
                this.asset = e.data;
            });
    },
}
</script>