VUE3新手上路，想要搭配既有JS專案改一些東西。
目前有一些文字輸入欄位是透過js auto complete取得，但發現用v-model無法取得完整數值，請問該如何修改。
以下為部分code。

<div class="row">
	<div class="col-md-3">
		<label for="fnode">fnode:</label>
		<input type="text" class="form-control required" id="fnode" name="fnode" v-model="fnode">
	</div>
		<div class="col-md-3">
		<label for="fnode">fnode:</label>
		<button class="btn btn-primary form-control">{{ fnode }}</button>
	</div>
</div>

<script>
$(function() {
    src = 'autonode.php';

    // Load the cities straight from the server, passing the country as an extra param
    $("#fnode").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: src,
                dataType: "json",
                data: {
                    term : request.term,
                    mso : $("#mso").val()
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        min_length: 1,
        delay: 100
    });
});

    Vue.createApp({
        data: function(){
            return {
                fnode: '',
            };
        },
        methods: {
            
        },
        mounted: function() {

        },
    }).mount('#form1');
</script>

先謝謝各位