JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vuex@4.0.0-beta.4/dist/vuex.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.0-beta.3/dist/vue-router.global.js"></script>
<div id="app">
    <h1>{{ message.test }}</h1>
    <child v-model="message"></child>
</div>

JavaScript

const { createApp, reactive, ref, computed, watch } = Vue;

const child = {
    template: `<input v-model="message" type="text" />`,
    
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
    },

    emits: ['update:modelValue'],

    setup(props, { emit }) {
        // Solution 1 (using computed to get the nested 'test' value)
        const message = computed({
           get: () => props.modelValue.test,
           set: (test) => emit('update:modelValue', ({...props.modelValue, test })),
        });
        
        // Solution 2 (if using v-model="message.test")
        // const message = reactive({...props.modelValue});
				// watch(message, message => emit('update:modelValue', ({...message})));
        
        return { message };
    }
};

createApp({
    components: { child },

    setup() {
        const message = ref({ test: 'Karamazov' });

        return { message };
    }
}).mount('#app');