Creating a New Vue.js Component and Watching Reactive Changes

Demonstrate how to create a basic Vue.js component and use the watchEffect function to observe reactive changes in the Virtual DOM.
<!DOCTYPE html>
    <title>Vue.js Component</title>
    <div id="app">
        <user-profile :username="'JohnDoe'" />

    <script src=""></script>
        Vue.component('user-profile', {
            props: ['username'],
            template: `<div>
                <h1>{{ fullName }}</h1>
            data() {
                return {
                    firstName: this.username,
                    lastName: 'Smith' 
            computed: {
                fullName() {
                    return this.firstName + ' ' + this.lastName;
            watch: {
                firstName(newVal, oldVal) {
                    console.log(`firstName changed from ${oldVal} to ${newVal}`);

        new Vue({
            el: '#app'
This HTML document includes a Vue.js component with a script that registers a 'user-profile' component, which has a 'username' prop, a computed property for the 'fullName', and a watcher that logs changes to 'firstName'. In the Vue instance, this component is used and provided a username prop. Vue.js library is included from a CDN.
h1 {
    color: #333;
CSS styles for the h1 element to set the text color.