在刀片中使用php参数调用vue js函数

{{-- Blade 模板 --}}
<div id="app">
    <p>{{ $phpVariable }}</p>
</div>

<script src="{{ asset('js/app.js') }}"></script>

// Vue.js 组件
const app = Vue.createApp({
    data() {
        return {
            phpVariable: '<?php echo $phpVariable; ?>'
        };
    }
});
app.mount('#app');

{{-- Blade 模板 --}}
<div id="app">
    <p>{{ $phpVariable }}</p>
    <button @click="fetchData">Fetch Data</button>
</div>

<script src="{{ asset('js/app.js') }}"></script>

// Vue.js 组件
const app = Vue.createApp({
    data() {
        return {
            phpVariable: ''
        };
    },
    methods: {
        fetchData() {
            fetch('/api/data')
                .then(response => response.json())
                .then(data => {
                    this.phpVariable = data.phpVariable;
                });
        }
    }
});
app.mount('#app');

{{-- Blade 模板 --}}
<div id="app">
    <p>{{ phpVariable }}</p>
</div>

<script src="{{ asset('js/app.js') }}"></script>

// Vue.js 组件
const app = Vue.createApp({
    data() {
        return {
            phpVariable: ''
        };
    },
    created() {
        eventBus.$on('updatePhpVariable', (data) => {
            this.phpVariable = data;
        });
    }
});
app.mount('#app');

// PHP 后端
Route::get('/update-data', function () {
    $phpVariable = 'New Data';
    return response()->json(['phpVariable' => $phpVariable]);
});

{{-- Blade 模板 --}}
<div id="app">
    <p>{{ $phpVariable }}</p>
</div>

<script src="{{ asset('js/app.js') }}"></script>

// Vue.js 组件
const app = Vue.createApp({
    data() {
        return {
            phpVariable: '<?php echo $phpVariable; ?>'
        };
    }
});
app.mount('#app');