<template> <h2>Example v-model Directive</h2> <p>App.vue 'text' property: "<pre>{{ text }}</pre>"</p> <button v-on:click="this.text = 'Hello!'">text='Hello!'</button> <comp-one v-model="text"/> </template> <script> export default { data() { return { text: 'Say Cheese' } } } </script> <style> pre { display: inline; background-color: yellow; } </style>

 <template> <div> <h3>Component</h3> <p>Two-way binding on component with v-model:</p> <ol> <li>The component can update the 'text' property (using text field).</li> <li>The component gets updated when the 'text' property is changed (using button).</li> </ol> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </div> </template> <script> export default { props: ['modelValue'], emits: ['update:modelValue'] } </script> <style scoped> div { border: solid black 1px; padding: 10px; margin: 20px 0; max-width: 600px; } </style>

 import { createApp } from 'vue' import App from './App.vue' import CompOne from './components/CompOne.vue' const app = createApp(App) app.component('comp-one', CompOne) app.mount('#app')