Updated my first vue component

sections/header.liquid

@@ -11,6 +11,8 @@
  <link rel="stylesheet" href="{{ 'component-mega-menu.css' | asset_url }}" media="print" onload="this.media='all'">
 {%- endif -%}
 
+<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+ <script src="{{ 'my-component.js' | asset_url }}"></script>
 
 <style>
  header-drawer {
@@ -122,6 +124,20 @@
 
 <h1>Hello Welcome</h1>
 
+
+<div id="app">
+ <my-component></my-component>
+</div>
+
+<script>
+ new Vue({
+ el: '#app',
+ components: {
+ 'my-component': MyComponent
+ }
+ });
+</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
  if section.settings.menu != blank