Handling user input with VDOM

Capture and handle user input in a Vue component, observing the VDOM updates as the user types.
    <input v-model="userInput" placeholder="Type something..." />
    <p>You typed: {{ userInput }}</p>

export default {
  data() {
    return {
      userInput: '' // Initialize the user input data

div {
  margin: 20px;
input {
  margin-right: 10px;
This piece of code creates a Vue component with a single data property 'userInput', a text input field (bound to 'userInput' using v-model), and a paragraph element that updates in real-time based on the input field's value. The CSS styles add some margin for better visual separation.