I have battled with VUE for a couple days now and I have what I need ALMOST complete but one thing eludes me; real time updating.

WHAT I'VE ACHIEVED

View component is setup and working within the blade as it should be I am able to push new data to the console in real time which means.... My "Pusher" setup is correct

WHAT I CAN'T ACHIEVE

Updating the collection with the new data that's been posted (but remember, this data IS making it to the page as I can print it to the console.

HERE'S WHAT I HAVE

VUE Component

<template> <div> <div class="card shadow mb-4" v-for="question in event.questions"> <div class="card-header gradient_bg d-flex justify-content-between align-items-center"> <div class=""> {{question.created_at}} </div> <div class=""> <ul class="nav nav-pills card-header-pills float-right"> <li class="nav-item ml-2"> <a onclick="var result = confirm('Ban this user? All their questions will be deleted and the user will be blocked from posting any more.');" class="btn bg-white nav-link " :href="'/ban-user/' + question.question_token"> <i class="fas fa-ban text-black-50"></i></a> </li> <li class="nav-item ml-2"> <a onclick="var result = confirm('Archive this question for later?');" class="btn bg-white nav-link text-light" :href="'/archive-question/' + question.question_token"> <i class="fas fa-archive text-black-50"></i></a> </li> <li class="nav-item ml-2"> <a onclick="var result = confirm('Are you sure you want to delete this question?');" class="btn bg-white nav-link text-light" :href="'/delete-question/' + question.question_token"> <i class="fas fa-trash-alt text-black-50"></i></a> </li> <li class="nav-item ml-2"> <a class=" btn bg-white text-light font-weight-bold nav-link" href="#"><i class="fas fa-star text-black-50"></i></a> </li> </ul> </div> </div> <div class="card-body p-3"> <h5 class="card-title">{{question.question}}</h5> <div class="answer-area" style="display:none"> <form class="" method="POST" action="/add-answer/:question.question_token"> @csrf <textarea rows="5" class="d-block w-100 mb-2 p-3" name="answer"></textarea> <input type="submit" name="" class="btn btn-brand3 text-white fw900 px-5" value="Submit Answer" placeholder="" id=""> </form> </div> <a href="#" :id="'answer-button' + question.id" class="btn btn-brand float-right px-5">Answer</a> <a href="#" id="close-button" style="display:none" class="btn btn-danger text-white float-right px-5">Cancel</a> </div> </div> </div> </template> <script> export default { props: ['event'], mounted() { console.log('Component mounted.'); // Enable pusher logging - don't include this in production Pusher.logToConsole = true; var pusher = new Pusher('*************', { cluster: 'eu', forceTLS: true }); var channel = pusher.subscribe('my-channel'); channel.bind('my-event', function(data) { location.reload(); }); } } </script>

BLADE TEMPLATE

@extends('layouts.app') @section('content') {{-- <meta http-equiv="Refresh" content="15">--}} <div class="container"> <div class="row justify-content-center mb-4"> <div class="col-12"> </div> </div> <div class="row"> <div class="col-12 col-md-4"> <div class="card shadow mb-4"> <div class="card-header gradient_bg d-flex justify-content-between align-items-center"> <div class=""> <h5 class="card-text py-2">Event Details</h5> </div> </div> <div class="card-body p-3"> <h3>{{$event->event_name}}</h3> </div> </div> </div> <div class="col-12 col-md-8" id="questions"> <questions :event="{{$event}}"></questions> </div> </div> </div> @endsection

APP.JS

/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */ // const files = require.context('./', true, /\.vue$/i) // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) Vue.component('questions', require('./components/Questions.vue').default); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: '#app', });

I'd love to know what I'm missing. All help really appreciated.