console 命令行工具 X clear
console
<html>

    <body>
        <div id="app">
            <p>{{ msg }}</p>
            <Comp v-model="msg" :query="{ id: form.id }" />
        </div>

        <script src="https://cpfile.yqcx.faw.cn/static/vue/2.6.11/vue.min.js"></script>
        <script>

            // 定义一个名为 button-counter 的新组件
            Vue.component('Comp', {
                props: {
                    value: {
                        type: String
                    },
                    query: {
                        type: Object,
                        default: () => {}
                    },
                },
                data () {
                    return {
                        count: 0
                    }
                },
                template: `<div><input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />  watch execution {{ count }}</div>`,
                watch: {
                    query: function() {
                        this.count ++
                    }
                }
            })

            var vm = new Vue({
                el: '#app',
                data(){
                    return {
                        msg: 'hello',
                        form: {
                            id: 1
                        }
                    }
                }
            })
        </script>
    </body>
</html>
本项目引用的自定义外部资源

vue.min.js