请问为什么input使用类名获取value无法实时获取最新value值

问题：在input文本框内输入内容时，使用input.value无法动态获取到值
代码


<body>
    <div class="app">
        <input class="search" type="text" v-on:keyup="clear" value="normal">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        var search = document.querySelector('.search');
        const vm = new Vue({
            el: '.app',
            methods: {
                clear(e) {
                    //用类名获取
                    console.log(search);
                    console.log(search.value);
 
                    // console.log(e.target);
                    // console.log(e.target.value);
                }
            }
        });
    </script>

3.无论向Input内输入什么，都还是默认值normal

4.而当我使用e.target.value来获取就可以动态获取到input内的值

5.请问这是什么原理，为什么用input.value不能获取到动态值？

刚开始获取一次input的原生对象所以search的值为normal，而在页面上输入框上输入的值只是视图上的变化，所以在vue内部获取的是vue记录的第一次真实dom的值。这是个人理解，如果有不对的地方，还请纠正

你元素获取早了，这样就好了

<body>
    <div class="app">
        <input class="search" type="text" v-on:keyup="clear" value="normal">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm = new Vue({
            el: '.app',
            methods: {
                clear(e) {
                    var search = document.querySelector('.search');
                    //用类名获取
                    console.log(search);
                    console.log(search.value);

                    // console.log(e.target);
                    // console.log(e.target.value);
                }
            }
        });
    </script>