Javascript VueJS反应性在叶片段内不起作用

我刚刚在用vuejs做实验，试图让它在我的laravel项目中工作

问题是，如果我的元素在布局叶片模板中，而不是在部分中，那么反应性工作正常。我试图从控制台修改属性，以查看它们在DOM中的更改

我有一个名为blog.blade.php的视图，它扩展了布局app.blade.php

    <div id='test'>
        @{{ test }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    var app2 = new Vue({
        el : "#test",
        data : {
            test : "Hello World"
        }
    });

    var app3 = new Vue({
        el : "#root",
        data : {
            tester : "Hello Vue!"
        }
    });

    </script>
</body>
</html>

app.blade.php中的代码

    <div id='test'>
        @{{ test }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    var app2 = new Vue({
        el : "#test",
        data : {
            test : "Hello World"
        }
    });

    var app3 = new Vue({
        el : "#root",
        data : {
            tester : "Hello Vue!"
        }
    });

    </script>
</body>
</html>

@{{test}}
var app2=新的Vue({
el:“测试”，
数据：{
测试：“你好，世界”
}
});
var app3=新的Vue({
el:“根”，
数据：{
测试人员：“你好，Vue！”
}
});

下面是我的blog.blade.php视图中的代码

   <div class='card'>
        <div class='card-header'>Post a comment</div>
        <div class='card-body'>
           <div id='root'> @{{ tester }} </div>
        </div>
    </div>

发表评论
@{{tester}}

在元素根中，tester属性的值显示出来，但不能修改，但这在app.blade.php布局文件末尾的测试元素中有效

我真的迷路了，不知道这里发生了什么。 如果有人能解释一下，那就太好了

---

更改vuejs提供的v型属性值

阅读此文档以了解更多信息

<div class='card'>
    <div class='card-header'>Post a comment</div>
    <div class='card-body'>
       <div id='root' v-model='tester'> @{{ tester }} </div>
    </div>
</div>

发表评论
@{{tester}}

如果在vue开发控制台或浏览器控制台中更改测试仪值，则可以很容易地看到它被更改

---

我还建议您使用调试vue应用程序。

为什么要使用两个vue实例？@Boussadjrahim我只是在尝试lol。它对一个实例都不起作用。您想得到什么？@Boussadjrahim我正在尝试他们网站上视频中最基本的vue示例。初始化一个组件，在DOM中呈现一个属性，并从控制台对其进行修改，使其显示在DOM中。但这不起作用。如何使用console修改它？