Handling user input with VDOM

Capture and handle user input in a Vue component, observing the VDOM updates as the user types.

<template>
  <div>
    <input v-model="userInput" placeholder="Type something..." />
    <p>You typed: {{ userInput }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInput: '' // Initialize the user input data
    };
  }
};
</script>

<style>
div {
  margin: 20px;
}
input {
  margin-right: 10px;
}
</style>

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.