@JeffreyWay I was messing around and found no difficulty in installing vue with "npm create vue@latest" as per the Vue documentation and changing the code on EPISODE 5 - One Vue Component Per File like these:

index.html

<!DOCTYPE html>
<html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8">
    <!-- removed the vue CDN from here - installed by npm -->
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
  </head>
  <body class="h-full grid place-items-center">
    <div id="app">
      <app-button>Submit</app-button>
    </div>
    <script type="module">
    // link:  https://vuejs.org/tutorial/#step-1 > section "Tutorial Setting Details"
	  import { createApp } from 'vue/dist/vue.esm-bundler.js';
      import AppButton from "./js/components/AppButton.vue";
      let app = {
          components: {
              'app-button': AppButton
          }
      };
      createApp(app).mount('#app');
    </script>
  </body>
</html>

AppButton.vue

<script>
  export default {
    data() {
      return {
        processing: true
      };
    }
  }
</script>
<template>
  <button class="bg-gray-200 hover:bg-gray-400 border
    rounded px-5 py-2 disabled:cursor-not-allowed"
    :disabled="processing">
      <slot />
  </button>
</template>

I know this is using Vite, but it was the only way I got proper syntax highlighting/linting/auto formatting using Neovim.

More Flexible Components With Slots and Flags