Laravel+Vite+Vue项目中PrimeVue组件显示但无法交互求助

我在Laravel、Vite和Vue.js组成的项目中使用PrimeVue，发现多数组件仅能显示却无法正常交互，只有Dropdown组件可以正常工作。具体异常表现：

• FloatLabel的标签不会在点击输入框后移至输入框上方；
• InputSwitch点击后无切换反应；
• Knob、Rating组件也无法响应交互操作。

原以为是Tailwind导致的问题，尝试使用无样式版本并适配Tailwind，但仍未解决。

项目相关代码 #

app.js（等同于main.js） #

import "./bootstrap";
import router from "./router";
import { createApp } from "vue";
import PrimeVue from 'primevue/config';
import 'primevue/resources/themes/mdc-light-indigo/theme.css'

import App from "./App.vue";

const app = createApp(App)

export function checkISMobile(){
    if(screen.width <= 760){
        return true;
    }
    return false
}

app.use(router)
app.use(PrimeVue, {
    ripple: true,
    inputStyle: "filled"
})

app.mount('#app')

app.css #

@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

组件使用代码 #

<template>
    <h1>Search Page</h1>
    <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
<br><br>
<h4>FloatLabel</h4>
    <FloatLabel>
    <InputText id="username" v-model="username" />
    <label for="username">Username</label>
</FloatLabel>

    <Knob v-model="value" />
    <InputSwitch v-model="checked" />

    <Rating v-model="value" />

</template>

内容的提问来源于stack exchange，提问作者Zahir Bobat