Javascript 如何将数据从Vue.js传递到刀片视图？

在我的Laravel项目中，我找不到将数据从vue.js组件传递到blade view的方法。我试图使用隐藏的inputfield，但数据绑定返回[object]

---

任何帮助都将不胜感激。

在根组件数据对象中创建一个变量，并从子组件更改它，因此假设resources/js/components/ExampleComponent.vue如下

<template>
    <div class="container">
        <input v-model="field" type="text">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                field: ''
            }
        },
        watch: {
            field: function (val) {
                this.$root.bladeValue = val;
            }
        }
    }
</script>

还有一个刀片视图，比如resources/views/welcome.blade.php

@{{bladeValue}}

---

然后bladeValue将绑定到ExampleComponent中的字段

欢迎使用堆栈溢出。请添加一些代码来帮助解释您遇到的问题。