vue-decorator

import { Component, Prop, Watch, Emit } from 'vue-decorator'; import { Vue } from 'vue-class-component'; // Vue 3 compatibility requires Vue from vue-class-component @Component({ template: ` <div> <p>Hello, {{ userName }}!</p> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <input type="text" :value="message" @input="updateMessage(($event.target as HTMLInputElement).value)" /> <p>Message: {{ message }}</p> </div> ` }) export default class MyComponent extends Vue { @Prop({ default: 'Guest' }) readonly userName!: string; count: number = 0; message: string = 'Initial message'; @Watch('count') onCountChanged(newValue: number, oldValue: number) { console.log(`Count changed from ${oldValue} to ${newValue}`); } @Emit('message-updated') updateMessage(value: string) { this.message = value; return value; } increment() { this.count++; } mounted() { console.log('Component mounted with user:', this.userName); } }