Updated

assets/my-component.js

@@ -1,8 +1,4 @@
 Vue.component('my-component', {
-  template: '<div>{{ message }}</div>',
-  data() {
-    return {
-      message: 'Hello from My Component!',
-    };
-  },
+  template: '<div>Hello from My Component!</div>',
+  // Add your component's data, methods, etc. here
 });

sections/header.liquid

@@ -123,7 +123,18 @@
 
 <h1>Hello Welcome</h1>
 
+
+<div id="app">
   <my-component></my-component>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+      new Vue({
+          el: '#app'
+      });
+  });
+</script>
 
   <header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} page-width{% if section.settings.menu_type_desktop == 'drawer' %} drawer-menu{% endif %}{% if section.settings.menu != blank %} header--has-menu{% endif %}{% if has_app_block %} header--has-app{% endif %}{% if social_links %} header--has-social{% endif %}{% if shop.customer_accounts_enabled %} header--has-account{% endif %}{% if localization_forms %} header--has-localizations{% endif %}">
     {%- liquid