How to properly include files in a vue.js project?

Question

webpack

Hello. There is a ready-made code, but it does not want to work on my project.

<template>
<div id="v-model-basic" class="demo">
  <input v-model="message" placeholder="edit me" />
  <p>Message is: {{ message }}</p>
</div>
</template>
<style>
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
</style>

<script>
Vue.createApp({
  data() {
    return {
      message: ''
    }
  }
}).mount('#v-model-basic')
</script>


Вот структура проекта vue cli:

Helloworld.vue:
<template>
 <div id="v-model-basic" class="demo">
  <input v-model="message" placeholder="edit me" />
  <p>Message is: {{ message }}</p>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
</style>

App.vue:

<template>
  <HelloWorld/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}



</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
<code>

main.js

<code> 
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

createApp(App)({
    data() {
      return {
        message: ''
      }
    }
  }).mount('#v-model-textarea')
<code>

Куда поставить html и css я разобрался, а код js не работает. Что нужно написать в main.js? И куда нужно поставить код js, чтобы заработало?