Headless Ui vue scripts not working on my end - laravel-mix-vue3

Question

So I stumbled upon headless ui since tailwind ui uses this for their functionality but my code isn't working..I have successfully installed vue 3 which is a requirement for headlessui/vue but I can't get it to work on my end. This is the code I'm talking about
<template>
<div class="w-full max-w-md px-2 py-16 sm:px-0">
<TabGroup>
<TabList class="flex p-1 space-x-1 bg-blue-900/20 rounded-xl">
<Tab
v-for="category in Object.keys(categories)"
as="template"
:key="category"
v-slot="{ selected }"
>
<button
:class="[
'w-full py-2.5 text-sm leading-5 font-medium text-blue-700 rounded-lg',
'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-blue-400 ring-white ring-opacity-60',
selected
? 'bg-white shadow'
: 'text-blue-100 hover:bg-white/[0.12] hover:text-white',
]"
>
{{ category }}
</button>
</Tab>
</TabList>
<TabPanels class="mt-2">
<TabPanel
v-for="(posts, idx) in Object.values(categories)"
:key="idx"
:class="[
'bg-white rounded-xl p-3',
'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-blue-400 ring-white ring-opacity-60',
]"
>
<ul>
<li
v-for="post in posts"
key="post.id"
class="relative p-3 rounded-md hover:bg-coolGray-100"
>
<h3 class="text-sm font-medium leading-5">
{{ post.title }}
</h3>
<ul
class="flex mt-1 space-x-1 text-xs font-normal leading-4 text-coolGray-500"
>
<li>{{ post.date }}</li>
<li>·</li>
<li>{{ post.commentCount }} comments</li>
<li>·</li>
<li>{{ post.shareCount }} shares</li>
</ul>
<a
href="#"
:class="[
'absolute inset-0 rounded-md',
'focus:z-10 focus:outline-none focus:ring-2 ring-blue-400',
]"
/>
</li>
</ul>
</TabPanel>
</TabPanels>
</TabGroup>
</div>
</template>
<script>
import { ref } from 'vue'
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '#headlessui/vue'
export default {
components: {
TabGroup,
TabList,
Tab,
TabPanels,
TabPanel,
},
setup() {
let categories = ref({
Recent: [
{
id: 1,
title: 'Does drinking coffee make you smarter?',
date: '5h ago',
commentCount: 5,
shareCount: 2,
},
{
id: 2,
title: "So you've bought coffee... now what?",
date: '2h ago',
commentCount: 3,
shareCount: 2,
},
],
Popular: [
{
id: 1,
title: 'Is tech making coffee better or worse?',
date: 'Jan 7',
commentCount: 29,
shareCount: 16,
},
{
id: 2,
title: 'The most innovative things happening in coffee',
date: 'Mar 19',
commentCount: 24,
shareCount: 12,
},
],
Trending: [
{
id: 1,
title: 'Ask Me Anything: 10 answers to your questions about coffee',
date: '2d ago',
commentCount: 9,
shareCount: 5,
},
{
id: 2,
title: "The worst advice we've ever heard about coffee",
date: '4d ago',
commentCount: 1,
shareCount: 2,
},
],
})
return { categories }
},
}
</script>
and here's my package.json with the dependencies
"devDependencies": {
"#tailwindcss/ui": "^0.3",
"#vue/compiler-sfc": "^3.2.4",
"autoprefixer": "^9.6",
"axios": "^0.21",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.27",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"postcss-import": "^12.0",
"postcss-nested": "^4.2",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"tailwindcss": "^1.8",
"vue": "^2.6.12",
"vue-loader": "^16.5.0",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"#headlessui/vue": "^1.4.0",
"#heroicons/vue": "^1.0.4",
"#popperjs/core": "^2.9.3",
"#tailwindcss/forms": "^0.3.3",
"vue": "^3.2.4"
}
then my app.js where I handle my vue components
require('./bootstrap');
import { createApp } from 'vue'
import example from './components/ExampleComponent.vue'
import test from './components/test.vue'
createApp({
components:{
example,
test,
}
}).mount('#app')
I really hope anyone can help me if I understand how this structure works it would be a great help moving forward on my career

Answer 1

So I reviewed my code and the problem is that I put 2 script tags in the header and footer so I just removed the footer script and it works perfectly