My attempt to display messages from my database in a Laravel blade file using a Vue component is not working as expected. I'm referring to this Github repository https://github.com/kevilondo/group-chat for guidance. The data is being stored in the database and posting correctly, but the messages aren't showing up on the frontend.
I have limited experience with Vue.js.
The error message in the console says: Uncaught TypeError: Cannot read properties of undefined (reading 'prototype').
This is how my app.js file looks:
import Alpine from "alpinejs";
...
The contents of the bootstrap file:
window._ = require('lodash');
...
Description of the Message.vue file:
<template>
<div v-if="user_id !== this.$userId" class="container card bg-info mb-4 float-start" style="width: 58%;">
...
</script>
Relevant part of show.blade.php:
<div class="card-body container">
...
app.blade.php file:
<body class="font-sans antialiased">
...
</body>
Controller method :
public function show_messages($id)
{
$group = Group::find($id);
...