Javascript 如何使用VUE在DOM中同步数据？

我想使用Vue将数据从ACE编辑器绑定到前端，也就是说，当我在编辑器中键入内容时，我可以在其他位置同步内容

编辑器逻辑很简单，editor.getValue用于获取内容，editor.on'input，{……}函数用于侦听'input'事件

我有这个：

<div id="content">
    <div id="editor" v-ace-editor="{snippet: snippet , type: type}" style="height:400px; width:100%"></div>
    <div>{{snippet}}</div>
</div>

<script>


    Vue.directive('ace-editor', {
        bind: function (el, binding, vnode) {
            var editor = ace.edit(el);
            editor.setValue(binding.value.snippet);
            console.log(binding);

            editor.on('input', function(){
                binding.value.snippet = editor.getValue();
            })

        }
    })

    var vm = new Vue({
        el: '#content',
        data: {
            snippet : 'select * from ...',
            type : 'hive'
        }
    })
</script>

理想情况下，当我输入代码时，在监听器中我更新snippet的值，而实际上{{snippet}}没有改变

---

有人能告诉我为什么吗？

好吧，这似乎是因为我将代码段作为字符串传递，这产生了一个新字符串，所以旧字符串不会被跟踪。不确定

目前我的解决方案是构建一个对象，它可以工作

<div id="content">
    <div id="editor" v-ace-editor="{snippet: snippet}" style="height:400px; width:100%"></div>
    <div>{{snippet.statement}}</div>
</div>

<script>
    Vue.directive('ace-editor', {
        bind: function (el, binding, vnode) {
            var editor = ace.edit(el);
            editor.setValue(binding.value.snippet.statement);        
            editor.on('input', function(){
                binding.value.snippet.statement = editor.getValue();
            })
        }
    })

    var Snippet = function(){
        this.statement = "nothing";
        this.type = 'hive';
    }

    var vm = new Vue({
        el: '#content',
        data: {
            snippet : new Snippet()
        }
    })
</script>