[Vuejs]-Vue Laravel not showing data from method

The issue was not something anyone here could solve with the information provided. So I am typing this answer in a way that I hope will trigger some help to others.

When you are doing a v-for snippet, it is important to remember what data is being pulled for processing. In my case, the following line was the issue

<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full" :class="[room.is_private === 'Public' ? 'bg-green-100 text-green-800' : room.is_private === 'Private' ? 'bg-red-100 text-red-800' : '']">

room.is_private is a boolean not the data I want to visualize. So by saying Public and Private, I was breaking the for statement. By changing them to True and False, I was able to process the v-for statement and actually get the code to load. The solution I used was as follows. Note there are 2 versions of true and false. This is because Postgres and sqlite both expect to see the response differently. I noticed this when it worked local with ‘true’ but pgsql on the deployment didn’t work. So this Is why the code is this way

                                                            <div v-if="room.is_private === true" class="rounded-full py-1 px-2 bg-red-100 text-red-800">
                                                                        <span>Private</span>
                                                                    </div>
                                                                    <div v-else-if="room.is_private === false" class="rounded-full py-1 px-2 bg-green-100 text-green-800">
                                                                        <span>Public</span>
                                                                    </div>
                                                                    <div v-else-if="room.is_private === 'true'" class="rounded-full py-1 px-2 bg-red-100 text-red-800">
                                                                        <span>Private</span>
                                                                    </div>
                                                                    <div v-else-if="room.is_private === 'false'" class="rounded-full py-1 px-2 bg-green-100 text-green-800">
                                                                        <span>Public</span>
                                                                </div>

The important lesson here is to make sure you sample the data and fields before running into code making mistakes on the type of data being requested.